Accessibility Links

Skip to main contentAccessibility help
Accessibility feedback

Filters and Topics

AI Mode
Gemini 3 models
Fast
Answers quickly
Pro
Advanced thinking and generative layouts
All
Short videos
Videos
Forums
More
Shopping
Images
Web
Books
News
Maps
Something went wrong. Your history wasn't deleted.

Start new search
AI Mode history

Delete all searches?

You won't be able to return to these responses
Delete all
Manage public links
My Google Search History

Delete this search?

You won't be able to return to this response
AI Mode history

Delete all searches?

You won't be able to return to these responses
Delete all
Manage public links
My Google Search History
No AI Mode history
Recent
  • Creating a public link...
  • Creating a public link...
  • Creating a public link...
  • Creating a public link...
  • Creating a public link...
  • Creating a public link...
  • Creating a public link...
  • Creating a public link...
  • Creating a public link...
  • Creating a public link...
Thinking
how to implement multiple slideshows in html using javascript

February 03, 2026

To implement multiple slideshows on a single HTML page using JavaScript, you must
ensure that each slideshow operates independently. The most common pitfall is using a single global variable to track the current slide for all sliders, which causes them to interfere with each other. 
1. Structure the HTML 
Wrap each slideshow in a unique container. Use a common class for styling but distinct identifiers (or indices) for JavaScript logic. 
To manage multiple slideshows independently in JavaScript, use arrays to store the state for each slideshow, such as the current slide index. A single function can then control the slideshows based on an index passed from the HTML. Ensure you select slides only within their specific parent container to avoid interference. You can add automatic transitions using setInterval() for each slideshow or consider using lightweight libraries like Tiny Slider or Magic Slideshow for advanced features without extensive custom coding. For examples of HTML structure and JavaScript implementation using arrays, you can refer to stackoverflow.com, Stack Overflow, and Stack Overflow. 
Creating a public link...
Helpful
Not helpful
Thank you
Your feedback helps Google improve. See our Privacy Policy.
Share more feedbackReport a problemClose
  • How do I make multiple slideshows in the same html document?
    * 1 Answer. Sorted by: 8. Assign an id to each slide container and provide that to all of the slideshow functions. In addition, us...
    Stack Overflow
  • Multiple Slideshows on one page - Stack Overflow
    * 1 Answer. Sorted by: 2. Your current problem is that your gallery assumes all elements with class name showSlide belongs to the ...
    Stack Overflow
  • More than one slideshows on one page - Stack Overflow
    * 1 Answer. Sorted by: 1. Updated your code and 3 slideshows can run easily. You just have to adapt your js code (like I did); Add...
    Stack Overflow
  • Multiple slideshows on one page makes the first one not work ...
    Learn more. Scroll the menu and tap Add to Home Screen. Tap Add in the top-right corner. Tap Add to Home screen or Install app. Co...
    Squarespace Forum
  • html - How do you get multiple automatic slideshows on one page?
    * 1 Answer. Sorted by: Just a couple of changes and you are there. I also added an option to change delays, take a look: /* Find a...
    Stack Overflow
  • How do I get multiple slideshows on my html document?
    * 3 Answers. Sorted by: So I have tested the code and also updated it. There are only a few small 3-4 changes in your HTML file. P...
    Stack Overflow
  • How to Create a Multi Item Image Slider (w - YouTube
    In this video, we'll show you how to create a multi item image carousel with HTML, CSS, JavaScript and the tiny slider library. Co...
    YouTube
  • HTML Slideshow - How to install Magic Slideshow
    Download the Magic Slideshow demo (zip). Unzip the file on your computer and FTP the magicslideshow folder to your website directo...
    Magic Toolbox
  • Automatic Image Slider using JavaScript - GeeksforGeeks
    Approach: * The first step is to create the HTML markup for the image slider. The markup will contain an unordered list ( )...
    GeeksforGeeks
  • First steps with noUiSlider: Integration into HTML forms and more examples
    As mentioned at the beginning of this article, there is no limit on how many sliders can be created on the same HTML page. The onl...
    Claudio Kuenzler
  • Build a Reusable Carousel with Vue and Splide.js
    HTML Structure: Splide. js requires a specific HTML structure to work properly. You must wrap your slide elements (e.g., images or...
    OpenReplay Blog
  • How do I make multiple slideshows in the same html document?
    * 1 Answer. Sorted by: 8. Assign an id to each slide container and provide that to all of the slideshow functions. In addition, us...
    Stack Overflow
  • Multiple Slideshows on one page - Stack Overflow
    * 1 Answer. Sorted by: 2. Your current problem is that your gallery assumes all elements with class name showSlide belongs to the ...
    Stack Overflow
  • More than one slideshows on one page - Stack Overflow
    * 1 Answer. Sorted by: 1. Updated your code and 3 slideshows can run easily. You just have to adapt your js code (like I did); Add...
    Stack Overflow
Show all
yes pleasew

February 03, 2026

undefined
undefined
undefined
10 sites
Here are top web results for exploring this topic:
Stack Overflow·https://stackoverflow.com
How do I make multiple slideshows on same page in HTML?
but with the js template inside your HTML body, you are creating a table for each value in the array. This is logic and I do not know exactly ...
InfoTechSite·https://siteforinfotech.com
How To Add Multiple Slideshows On One Page Using Javascript
To make multiple slideshows, at first you have to make variable lists for each slideshow. Then you have to create a new slideshow using the function slideshow( ) ...
YouTube·https://www.youtube.com
How to Create a Multi Item Image Slider (w - YouTube
In this video, we'll show you how to create a multi item image carousel with HTML, CSS, JavaScript and the tiny slider library.
W3Schools Forum·https://w3schools.invisionzone.com
Multiple SlideShows on same HTML page - W3Schools Forum
You could pass along the SlideShow's ID as an argument. That's the most simple way. (Instead using separate IDs rather than classes). Edited ...
SitePoint·https://www.sitepoint.com
Multiple slideshows on one page makes the first one not work ...
I'm using the code blocks to create more customized slideshows. I need more than one slideshow on my page and the second one stops the first one from working.
W3Schools·https://www.w3schools.com
How To Create a Slideshow - W3Schools
Learn how to create a responsive slideshow with CSS and JavaScript. Slideshow / Carousel A slideshow is used to cycle through elements.
Squarespace Forum·https://forum.squarespace.com
Multiple slideshows on one page makes the first one not work ...
If you'd like to customise a slideshow, you would be better adding a Squarespace slideshow, for example a Gallery page in an Index, and then ...
Medium·https://medium.com
How to create a Slideshow/Carousel using HTML, CSS & JS.
Inside this div create another div with class carousel-view . - A button for the left scroll of the slideshow. - A div to hold the slideshow ...
YouTube·https://www.youtube.com
HTML, CSS & JavaScript - How to Create a Multi Item Image ...
In this video, we'll show you how to create an automatic multi item image carousel with HTML, CSS, JavaScript and the tiny slider library.
SitePoint·https://www.sitepoint.com
Multiple Javascript slideshows on one page - SitePoint
I have one working but need to know how to put a second slide show on the same page. Here is the script I am using: <script language="JavaScript ...
AI responses may include mistakes. Learn more
Helpful
Not helpful
Thank you
Your feedback helps Google improve. See our Privacy Policy.
Share more feedbackReport a problemClose
      Show all
      can i give you my html code and you tell me how to do it

      February 03, 2026

      Yes, you can share your HTML code. Providing the specific code you are working with will allow for a better understanding of the issue and more accurate assistance.
       
      Creating a public link...
      Helpful
      Not helpful
      Thank you
      Your feedback helps Google improve. See our Privacy Policy.
      Share more feedbackReport a problemClose
          Show all
          <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Past-Events Page</title> <link rel="stylesheet" href="/styles.css"> <link rel="stylesheet" href="/default.css"></head><body> <nav class="navbar"> <ul class="nav-list page-container"> <li><a href="/index.html"><h3>Home</h3></a></li> <li> <a href="#"><h3>Events</h3></a> <ul class="nav-list dropdown"> <li><a href="/past-events.html"><h3>Past Events</h3></a></li> <li class="dropdown-radius"><a href="Upcoming-Events.html"><h3>Upcoming Events</h3></a></li> </ul> </li> <li> <a href="#"><h3>Support</h3></a> <ul class="nav-list dropdown"> <li><a href="/support.html"><h3>Volunteer</h3></a></li> <li><a href="/donate.html"><h3>Donate</h3></a></li> <li class="dropdown-radius"><a href="/contact.html"><h3>Contact</h3></a></li> <li class="dropdown-radius"><a href="/sponsorships.html"><h3>Sponsorship</h3></a></li> </ul> </li> </ul> </nav> <div class="topnav" id="myTopnav"> <a href="/index.html" class="active"><h3>Home</h3></a> <div class="dropdown"> <button class="dropbtn">Events <i class="fa fa-caret-down"></i> </button> <div class="dropdown-content"> <a href="/events.html">Events</a> <a href="/past-events.html">Past Events</a> <a href="/Upcoming-Events.html">Upcoming Events</a> </div> </div> <div class="dropdown"> <button class="dropbtn">Support <i class="fa fa-caret-down"></i> </button> <div class="dropdown-content"> <a href="/support.html">Volunteer</a> <a href="/donate.html">Donate</a> <a href="/contact.html">Contact</a> <a href="/sponsorships.html">Sponsorship</a> </div> </div> <a href="javascript:void(0);" class="icon" onclick="myFunction()">☰</a> </div> <header> <h1 style="text-align: center;" class="past-htwo">Past Events</h1> </header> <h2 class="past-htwo">2025 Back2School Youth Day Spa</h2> <div class="sponsor-layout mobile-page-container page-container"> <div class="past-image-vertical"> <img class="b2s-img-layout" src="/images/Flyers/Back 2 School Flyer.png"> </div> <div class="sponsor-names"> <h2>Sponsors</h2> <p>Ambiance Beauty Bar</p> <p>BNI Roundtable Chapter</p> <p>T&T Tax services</p> <p>Toni Hokanson-Farmer insurance</p> <p>Saar’s super saver foods- </p> <p>Evergreen Beauty College </p> <p>Evergreen drill and drum line</p> <p>Dynasty Designz</p> <p>Villagers</p> </div> </div> <h2 class="past-htwo">2025 Military Youth Day Spa</h2> <div class="sponsor-layout mobile-page-container page-container"> <div class="past-image-vertical"> <div class="mySlides5"> <div class="numbertext"></div> <img src="/images/2025 Military Youth Day Spa/salute to the youth.jpeg" alt="mil-flyer"> </div> <div class="mySlides5"> <div class="numbertext"></div> <img src="/images/2025 Military Youth Day Spa/2025-03-23 12.48.23.jpg" alt="mil-one"> </div> <div class="mySlides5"> <div class="numbertext"></div> <img src="/images/2025 Military Youth Day Spa/2025-03-23 12.48.46.jpg" alt="mil-two"> </div> <div class="mySlides5"> <div class="numbertext"></div> <img src="/images/2025 Military Youth Day Spa/2025-03-23 12.49.09.jpg" alt="mil-three"> </div> <div class="mySlides5"> <div class="numbertext"></div> <img src="/images/2025 Military Youth Day Spa/2025-03-23 12.49.11.jpg" alt="mil-four"> </div> <div class="mySlides5"> <div class="numbertext"></div> <img src="/images/2025 Military Youth Day Spa/2025-03-23 12.49.23.jpg" alt="mil-five"> </div> <div class="mySlides5"> <div class="numbertext"></div> <img src="/images/2025 Military Youth Day Spa/2025-03-23 12.49.59.jpg" alt="mil-six"> </div> <div class="mySlides5"> <div class="numbertext"></div> <img src="/images/2025 Military Youth Day Spa/2025-03-23 12.50.01.jpg" alt="mil-seven"> </div> <div class="mySlides5"> <div class="numbertext"></div> <img src="/images/2025 Military Youth Day Spa/2025-03-23 12.50.25.jpg" alt="mil-eight"> </div> <div class="mySlides5"> <div class="numbertext"></div> <img src="/images/2025 Military Youth Day Spa/2025-03-23 12.50.34.jpg" alt="mil-nine"> </div> <div class="mySlides5"> <div class="numbertext"></div> <img src="/images/2025 Military Youth Day Spa/2025-03-23 12.51.16.jpg" alt="mil-ten"> </div> <div class="mySlides5"> <div class="numbertext"></div> <img src="/images/2025 Military Youth Day Spa/2025-03-23 12.51.34.jpg" alt="mil-eleven"> </div> <div class="mySlides5"> <div class="numbertext"></div> <img src="/images/2025 Military Youth Day Spa/arts & crafts MDYSD.JPG" alt="mil-twelve"> </div> <div class="mySlides5"> <div class="numbertext"></div> <img src="/images/2025 Military Youth Day Spa/IMG_1704.JPG" alt="mil-thirteen"> </div> <div class="mySlides5"> <div class="numbertext"></div> <img src="/images/2025 Military Youth Day Spa/IMG_1705.JPG" alt="mil-fourteen"> </div> <div class="mySlides5"> <div class="numbertext"></div> <img src="/images/2025 Military Youth Day Spa/IMG_1707.JPG" alt="mil-fifteen"> </div> <div class="mySlides5"> <div class="numbertext"></div> <img src="/images/2025 Military Youth Day Spa/IMG_1708.JPG" alt="mil-sixteen"> </div> <div class="mySlides5"> <div class="numbertext"></div> <img src="/images/2025 Military Youth Day Spa/NWTQ8742.JPEG" alt="mil-seventeen"> </div> <a class="prev" onclick="flightSlides(-1, 0)">❮</a> <a class="next" onclick="flightSlides(1, 0)">❯</a> <br> </div> <div class="sponsor-names"> <h2>Sponsors</h2> <p>Charlie’s Angel’s Unisex Salon</p> <p>Behind the Chair Foundation</p> <p>The Lions Den-Roop and Bryanna </p> <p>Rockstar Crown Royalty</p> <p>Overtones Salon</p> <p>Monticello Methodist Church</p> <p>Sandy Warren</p> <p>Snack Shack</p> <p>Adams </p> <p>Price Chopper</p> <p>Hannafords</p> <p>Sound of life</p> <p>Villagers</p> </div></div> <h2 class="past-htwo">2024 Holiday Day Spa with Behind the Chair Foundation <br> Youth of Incarcerated Parent</h2> <div class="sponsor-layout mobile-page-container page-container"> <div class="past-image-vertical"> <div class="mySlides2"> <div class="numbertext">Flyer</div> <img src="/images/Holiday kids day spa flyer.JPG" alt="hol-ten" style="width: 100%;"> </div> <div class="mySlides2"> <div class="numbertext">1/11</div> <img src="/images/Holiday kids day spa/IMG_8281.JPG" alt="hol-ten" style="width: 100%;"> </div> <div class="mySlides2"> <div class="numbertext">2/11</div> <img src="/images/Holiday kids day spa/IMG_8283.JPG" alt="hol-eleven"> </div> <div class="mySlides2"> <div class="numbertext">3/11</div> <img src="/images/Holiday kids day spa/IMG_8284.JPG" alt="hol-twelve"> </div> <div class="mySlides2"> <div class="numbertext">4/11</div> <img src="/images/Holiday kids day spa/IMG_8286.JPG" alt="hol-thirteen"> </div> <div class="mySlides2"> <div class="numbertext">5/11</div> <img src="/images/Holiday kids day spa/IMG_8287.JPG" alt="hol-fourteen"> </div> <div class="mySlides2"> <div class="numbertext">6/11</div> <img src="/images/Holiday kids day spa/IMG_8288.JPG" a

          February 03, 2026

          To implement multiple slideshows using your code, the best approach is to use an
          array of slide indices. This allows one function to handle every slideshow on your page without them conflicting. 
          1. Update your HTML 
          You need to wrap each slideshow group in a specific container class (e.g., slideshow-container) and pass a unique ID number (0, 1, 2, etc.) into the plusSlides function. 
          I have updated your buttons below to use plusSlides(n, id): 
          html
          <!-- Military Youth Day Spa (Slideshow Index 0) -->
          <div class="past-image-vertical slideshow-container">
              <div class="mySlides5"> ... </div>
              <!-- Note: changed flightSlides to plusSlides and added the index 0 -->
              <a class="prev" onclick="plusSlides(-1, 0)">❮</a>
              <a class="next" onclick="plusSlides(1, 0)">❯</a>
          </div>
          
          <!-- Holiday Day Spa (Slideshow Index 1) -->
          <div class="past-image-vertical slideshow-container">
              <div class="mySlides2"> ... </div>
              <!-- Note: added the index 1 -->
              <a class="prev" onclick="plusSlides(-1, 1)">❮</a>
              <a class="next" onclick="plusSlides(1, 1)">❯</a>
          </div>
          
          Use code with caution.
          2. Add the JavaScript 
          Add this script at the bottom of your body (or in your JS file). This script tracks the current slide for every container independently. 
          javascript
          // Array to keep track of the current slide for each slideshow
          // Add more zeros if you add more slideshows (e.g., [0, 0, 0])
          let slideIndex = [1, 1]; 
          
          // Class names of your slide groups
          let slideId = ["mySlides5", "mySlides2"]; 
          
          // Initialize all slideshows
          showSlides(1, 0);
          showSlides(1, 1);
          
          // Function called by the Prev/Next buttons
          function plusSlides(n, no) {
            showSlides(slideIndex[no] += n, no);
          }
          
          function showSlides(n, no) {
            let i;
            let x = document.getElementsByClassName(slideId[no]);
            
            if (n > x.length) {slideIndex[no] = 1}    
            if (n < 1) {slideIndex[no] = x.length}
            
            // Hide all slides in THIS specific slideshow
            for (i = 0; i < x.length; i++) {
               x[i].style.display = "none";  
            }
            
            // Show the active slide
            x[slideIndex[no]-1].style.display = "block";  
          }
          
          Use code with caution.
          3. Essential CSS 
          To make sure only one slide shows at a time and the buttons stay on top, add this to your styles.css: 
          css
          /* Hide slides by default */
          .mySlides5, .mySlides2 {
            display: none;
          }
          
          /* Ensure the container is positioned for the buttons */
          .slideshow-container {
            position: relative;
            max-width: 100%;
          }
          
          /* Style for buttons (if not already styled) */
          .prev, .next {
            cursor: pointer;
            position: absolute;
            top: 50%;
            width: auto;
            padding: 16px;
            color: white;
            font-weight: bold;
            font-size: 18px;
            background-color: rgba(0,0,0,0.5);
            user-select: none;
          }
          
          .next { right: 0; }
          .prev { left: 0; }
          
          Use code with caution.
          Why this works: 
          • Scalable: If you add a third slideshow, you just add its class name to the slideId array and a 0 to the slideIndex array.
          • Independent: Clicking "Next" on the Military Spa slideshow won't move the Holiday Spa slides because they use different array indices (0 vs 1). 
          Creating a public link...
          Helpful
          Not helpful
          Thank you
          Your feedback helps Google improve. See our Privacy Policy.
          Share more feedbackReport a problemClose
              Show all
              can you tell me what to delete and what to change in my code please

              February 03, 2026

              To implement multiple slideshows using the code provided earlier, follow these specific changes and deletions for your HTML file.
               
              1. What to Change in Your HTML 
              You need to update the function calls on your "Previous" and "Next" buttons so they tell the JavaScript which specific slideshow to move. 
              For the "Military Youth Day Spa" Slideshow (Index 0):
              Find this section in your code and update the onclick attributes. 
              • Change: flightSlides(-1, 0) → plusSlides(-1, 0)
              • Change: flightSlides(1, 0) → plusSlides(1, 0) 
              html
              <!-- Inside the 2025 Military Youth Day Spa section -->
              <a class="prev" onclick="plusSlides(-1, 0)">❮</a>
              <a class="next" onclick="plusSlides(1, 0)">❯</a>
              
              Use code with caution.
              For the "Holiday Day Spa" Slideshow (Index 1):
              Find this section and add the buttons (they are currently missing or cut off in your snippet). 
              • Use index 1 for the second parameter to distinguish it from the first slideshow. 
              html
              <!-- Inside the 2024 Holiday Day Spa section -->
              <a class="prev" onclick="plusSlides(-1, 1)">❮</a>
              <a class="next" onclick="plusSlides(1, 1)">❯</a>
              
              Use code with caution.
              2. What to Delete 
              • Delete any existing slideshow JavaScript: If you already have a flightSlides or showSlides function in your file, delete it entirely to prevent conflicts with the new multi-slideshow logic.
              • Remove unused classes (Optional): If you aren't using the .numbertext divs for actual counting (e.g., "1/11"), you can delete those <div> tags to clean up your code. 
              3. Final Step: Add the New Script 
              Paste this single script at the very bottom of your HTML, right before the closing </body> tag. This one script handles both slideshows independently. 
              javascript
              <script>
              // slideIndex tracks the current image for each slideshow
              let slideIndex = [1, 1]; 
              // slideId matches the class names you used in your HTML
              let slideId = ["mySlides5", "mySlides2"]; 
              
              // Initialize both slideshows on page load
              showSlides(1, 0);
              showSlides(1, 1);
              
              function plusSlides(n, no) {
                showSlides(slideIndex[no] += n, no);
              }
              
              function showSlides(n, no) {
                let i;
                let x = document.getElementsByClassName(slideId[no]);
                if (n > x.length) {slideIndex[no] = 1}    
                if (n < 1) {slideIndex[no] = x.length}
                for (i = 0; i < x.length; i++) {
                   x[i].style.display = "none";  
                }
                x[slideIndex[no]-1].style.display = "block";  
              }
              </script>
              
              Use code with caution.
              Summary of Changes: 
              Element What to do
              ButtonsChange flightSlides to plusSlides(n, index).
              JavaScriptReplace your old script with the one above that uses arrays.
              CSSEnsure .mySlides5 and .mySlides2 have display: none; in your CSS file.
              Creating a public link...
              Helpful
              Not helpful
              Thank you
              Your feedback helps Google improve. See our Privacy Policy.
              Share more feedbackReport a problemClose
              • Have a problem with two slideshows on the same page - SitePoint
                That script only allows for one slideshow per page. You would need to modify the script to make it more generic and to account for...
                SitePoint
              • More than one slideshows on one page - Stack Overflow
                Updated your code and 3 slideshows can run easily. You just have to adapt your js code (like I did); Add class name of the 3rd sli...
                Stack Overflow
              • w3schools multiple slideshow tutorial - additional slideshows
                * 1 Answer. Sorted by: Change your slideIndex and slideId to include members for the third slideshow. Then call showSlides for the...
                Stack Overflow
              • Have a problem with two slideshows on the same page
                1 Like. PaulOB November 22, 2016, 11:23am 3. lala: I'm trying to add two slideshows on my website page. That script only allows fo...
                SitePoint
              • Multiple slideshows not working (html, css, js) - Stack Overflow
                * 2 Answers. Sorted by: Edit: Solution 1: the proper way would be to actually add 2 values to 'slideIndex': var slideIndex = [1, 1...
                Stack Overflow
              • Build this image slider with JavaScript! 🖼️
                The video demonstrates how to build an image slider using JavaScript, HTML, and CSS. The process involves setting up the HTML stru...
                YouTube
              • How do I get multiple slideshows on my html document?
                3 Answers. Sorted by: 0. So I have tested the code and also updated it. There are only a few small 3-4 changes in your HTML file. ...
                Stack Overflow
              • How To Create a Slideshow - W3Schools
                Example. * {box-sizing:border-box} /* Slideshow container */ .slideshow-container { max-width: 1000px; position: relative; margin:
                W3Schools
              • Multiple image slideshows on one page - Kirby Forum
                *More on the slideshow. A simple structure for a slideshow could be a list of images (this is pure HTML): - - - ...
                Kirby Forum
              • HTML Page to Display Multiple Slideshows - Stack Overflow
                function carousel(className, slideStart) { var i; var myIndex = slideStart; var x = document. getElementsByClassName(className); f...
                Stack Overflow
              • More than one slideshows on one page - Stack Overflow
                Updated your code and 3 slideshows can run easily. You just have to adapt your js code (like I did); Add class name of the 3rd sli...
                Stack Overflow
              • w3schools multiple slideshow tutorial - additional slideshows
                * 1 Answer. Sorted by: Change your slideIndex and slideId to include members for the third slideshow. Then call showSlides for the...
                Stack Overflow
              • Have a problem with two slideshows on the same page
                1 Like. PaulOB November 22, 2016, 11:23am 3. lala: I'm trying to add two slideshows on my website page. That script only allows fo...
                SitePoint
              Show all
              yes please

              February 03, 2026

              undefined
              undefined
              undefined
              10 sites
              Here are top web results for exploring this topic:
              W3Schools·https://www.w3schools.com
              How To Create a Slideshow - W3Schools
              Learn how to create a responsive slideshow with CSS and JavaScript. Slideshow / Carousel A slideshow is used to cycle through elements.
              Stack Overflow·https://stackoverflow.com
              How do I make multiple slideshows on same page in HTML?
              but with the js template inside your HTML body, you are creating a table for each value in the array. This is logic and I do not know exactly ...
              InfoTechSite·https://siteforinfotech.com
              How To Add Multiple Slideshows On One Page Using Javascript
              To make multiple slideshows, at first you have to make variable lists for each slideshow. Then you have to create a new slideshow using the function slideshow( ) ...
              Quora·https://www.quora.com
              Can anyone tell me how to make a multiple image slider using ...
              In this article, you will learn how to create an automatic image slider using HTML CSS and JavaScript code. Earlier I shared with you many more ...
              Udemy Blog·https://blog.udemy.com
              JavaScript Slideshows Made Easy - Udemy Blog
              Learn to change an HTML image's src property, and you are minutes away from creating your own slideshow using nothing but JavaScript.
              YouTube·https://www.youtube.com
              Making a Slideshow with HTML, CSS, and JS - YouTube
              Slideshows are fairly common in websites. This video covers the basics of creating one. I encourage you to take my Code Samples and ...
              W3Schools Forum·https://w3schools.invisionzone.com
              Multiple SlideShows on same HTML page - W3Schools Forum
              For multiple SlideShows I have given each a different class name. .....but I don't know how to add a switch into each slide control function to ...
              SitePoint·https://www.sitepoint.com
              Have a problem with two slideshows on the same page
              I'm trying to add two slideshows on my website page (one below the other) I have tried but I can't get both of them to work and I can't figure it out.
              freeCodeCamp·https://www.freecodecamp.org
              How to Create a Slideshow with HTML, CSS, and JavaScript
              The first step to changing which slides show is to select the slide wrapper(s) and then its slides. When you select the slides you have to go ...
              Medium·https://medium.com
              How to build a slideshow using HTML, CSS, and JavaScript
              In conclusion, building a slideshow using HTML, CSS, and JavaScript is a relatively simple task that can be accomplished with just a few lines ...
              AI responses may include mistakes. Learn more
              Helpful
              Not helpful
              Thank you
              Your feedback helps Google improve. See our Privacy Policy.
              Share more feedbackReport a problemClose
                  Show all
                  can you tell me exactly what to delete in the javascrit section

                  February 03, 2026

                  To implement multiple independent slideshows in your JavaScript section, you must delete any existing code that relies on a single global variable (like
                  var slideIndex = 1;) or specific function names like flightSlides(). 
                  1. Exactly what to delete 
                  Delete the following types of entries from your current JavaScript: 
                  • Global Slide Index: Remove var slideIndex = 1; or any variable that tracks only one number for your slides.
                  • Single-Slideshow Functions: Delete functions such as function plusSlides(n) { ... } or function showSlides(n) { ... } that do not accept a second parameter to identify which slideshow is being used.
                  • Unique Button Functions: If you have function flightSlides(...) specifically for one section, delete it to replace it with a single, more versatile function. 
                  2. Exactly what to change 
                  Instead of separate scripts for each slider, replace your entire script block with this array-based logic: 
                  javascript
                  // DELETE: var slideIndex = 1;
                  // ADD: This tracks multiple indices at once
                  let slideIndex = [1, 1]; // One '1' for each slideshow on your page
                  
                  // ADD: This lists the specific class names you used in your HTML
                  let slideId = ["mySlides5", "mySlides2"]; 
                  
                  // Initial call to start both slideshows
                  showSlides(1, 0);
                  showSlides(1, 1);
                  
                  function plusSlides(n, no) {
                    showSlides(slideIndex[no] += n, no);
                  }
                  
                  function showSlides(n, no) {
                    let i;
                    let x = document.getElementsByClassName(slideId[no]);
                    
                    // Resets to beginning or end if you go past the total images
                    if (n > x.length) {slideIndex[no] = 1}    
                    if (n < 1) {slideIndex[no] = x.length}
                    
                    // ONLY hides images within this specific slideshow group
                    for (i = 0; i < x.length; i++) {
                       x[i].style.display = "none";  
                    }
                    
                    // Displays the current image
                    x[slideIndex[no]-1].style.display = "block";  
                  }
                  
                  Use code with caution.
                  3. Why this works 
                  • Array Usage: By using slideIndex[no], the code keeps the "current slide" count for the Military Spa separate from the Holiday Spa.
                  • Class Targeting: slideId[no] ensures that when you click "Next" on one slider, the code only targets the images in that specific section.
                  • Scalability: If you add a third slideshow with a new class (e.g., mySlides3), you simply add a 1 to slideIndex, add "mySlides3" to slideId, and call showSlides(1, 2). 
                  Creating a public link...
                  Helpful
                  Not helpful
                  Thank you
                  Your feedback helps Google improve. See our Privacy Policy.
                  Share more feedbackReport a problemClose
                  • Multiple slideshows on one page makes the first one not work anymore
                    javascript, html, css, slideshow ... If you are more interested in the minimal work to just get it working, both slideshows refer ...
                    SitePoint
                  • Multiple slideshows on one page makes the first one not work ...
                    Get slide buttons working with multiple slideshows * Rename n to a more meaningful name. * slideIndex shouldn't be reassigned in t...
                    SitePoint
                  • More than one slideshows on one page - Stack Overflow
                    * 1 Answer. Sorted by: 1. Updated your code and 3 slideshows can run easily. You just have to adapt your js code (like I did); Add...
                    Stack Overflow
                  • More than one slideshows on one page - Stack Overflow
                    1 Answer. ... Updated your code and 3 slideshows can run easily. You just have to adapt your js code (like I did); Add class name ...
                    Stack Overflow
                  • how can i use two javascript slideshows on one page? html
                    * 1 Answer. Sorted by: 0. easiest thing, off the top of my head is to just duplicate the HTML structure for the slideshow, changin...
                    Stack Overflow
                  • Have a problem with two slideshows on the same page
                    1 Like. PaulOB November 22, 2016, 11:23am 3. lala: I'm trying to add two slideshows on my website page. That script only allows fo...
                    SitePoint
                  • How do I make multiple slideshows in the same html document?
                    * 1 Answer. Sorted by: Assign an id to each slide container and provide that to all of the slideshow functions. In addition, use t...
                    Stack Overflow
                  • Multiple Image Slideshow Javascript Issue - Stack Overflow
                    1 Answer. Sorted by: 1. ID's must be unique, so, the best way to do this is get all galleries by their class name and start gettin...
                    Stack Overflow
                  • How do I get multiple slideshows on my html document?
                    * 3 Answers. Sorted by: So I have tested the code and also updated it. There are only a few small 3-4 changes in your HTML file. P...
                    Stack Overflow
                  • Having Trouble With Multiple Slideshows On One Page
                    Image here--> ❮ ❯ ❮ ❯
                    SitePoint
                  • Multiple slideshows on one page makes the first one not work ...
                    Get slide buttons working with multiple slideshows * Rename n to a more meaningful name. * slideIndex shouldn't be reassigned in t...
                    SitePoint
                  • More than one slideshows on one page - Stack Overflow
                    * 1 Answer. Sorted by: 1. Updated your code and 3 slideshows can run easily. You just have to adapt your js code (like I did); Add...
                    Stack Overflow
                  • how can i use two javascript slideshows on one page? html
                    * 1 Answer. Sorted by: 0. easiest thing, off the top of my head is to just duplicate the HTML structure for the slideshow, changin...
                    Stack Overflow
                  Show all
                  can you look over the code again because i have more slideshows than what your telling me i should fix

                  February 03, 2026

                  To fix your code for
                  all of your slideshows, you need to use an array approach that matches every single slide group you have. Based on your code, you have at least three different sections (Military, Holiday, and likely others you haven't shown yet). 
                  Here are the steps to update your code for multiple slideshows: 
                  1. Update HTML Buttons 
                  For each slideshow section, modify the onclick function to plusSlides(n, ID). The ID is a unique number for each slideshow, starting from 0. 
                  • Military Spa (Slideshow 0): onclick="plusSlides(-1, 0)" and onclick="plusSlides(1, 0)"
                  • Holiday Spa (Slideshow 1): onclick="plusSlides(-1, 1)" and onclick="plusSlides(1, 1)"
                  • Next Spa (Slideshow 2): onclick="plusSlides(-1, 2)" and onclick="plusSlides(1, 2)" 
                  2. Update the JavaScript 
                  Replace your existing slideshow functions with a single script that uses arrays to manage multiple slideshows. 
                  javascript
                  let slideIndex = [1, 1, 1]; // Add a '1' for every slideshow you have.
                  let slideId = ["mySlides5", "mySlides2", "mySlides-Next"]; // Add the specific class name for each slideshow
                  
                  // Start every slideshow
                  for (let i = 0; i < slideId.length; i++) {
                    showSlides(1, i);
                  }
                  
                  function plusSlides(n, no) {
                    showSlides(slideIndex[no] += n, no);
                  }
                  
                  function showSlides(n, no) {
                    let i;
                    let x = document.getElementsByClassName(slideId[no]);
                  
                    // Wrap around logic
                    if (n > x.length) {slideIndex[no] = 1}
                    if (n < 1) {slideIndex[no] = x.length}
                  
                    // Hide all images in this specific group
                    for (i = 0; i < x.length; i++) {
                       x[i].style.display = "none";
                    }
                  
                    // Show the current active image
                    x[slideIndex[no]-1].style.display = "block";
                  }
                  
                  Use code with caution.
                  3. What to Delete 
                  • Remove any other instances of var slideIndex = 1;.
                  • Delete any old functions named flightSlides or duplicate showSlides.
                  • Consolidate all scripts into one <script> block at the bottom of your HTML and remove any inline scripts. 
                  4. CSS Fix 
                  Ensure your CSS includes rules to initially hide all slides for each slideshow class. 
                  css
                  .mySlides5, .mySlides2, .mySlides-Next {
                    display: none;
                  }
                  
                  Use code with caution.
                  Creating a public link...
                  Helpful
                  Not helpful
                  Thank you
                  Your feedback helps Google improve. See our Privacy Policy.
                  Share more feedbackReport a problemClose
                  • Multiple Slideshows - W3Schools Tryit Editor
                    DOCTYPE html> Multiple Slideshows Slideshow 1: ❮ ❯ Slideshow 2: ❮ ❯ DOCTYPE html>
                    W3Schools
                  • How To Create a Slideshow - W3Schools
                    Example. * {box-sizing:border-box} /* Slideshow container */ .slideshow-container { max-width: 1000px; position: relative; margin:
                    W3Schools
                  • w3schools multiple slideshow tutorial - additional slideshows
                    * 1 Answer. Sorted by: Change your slideIndex and slideId to include members for the third slideshow. Then call showSlides for the...
                    Stack Overflow
                  • how to add more than 2 slideshows in w3 code? - Stack Overflow
                    You need to add another item to the slideIndex array, and another to the slideId array and call another showDivs(1, 2); And in you...
                    Stack Overflow
                  • Multiple Slideshow not working properly. Any Clue? - Stack Overflow
                    * 1 Answer. Sorted by: This code wont work because there's a problem with your JavaScript as some variables are conflicting I will...
                    Stack Overflow
                  • Arrays and Slideshows - Computer Science - Wellesley College
                    getElementById("slideshow"). src = url; } We really should do something about the ALT and the FIGCAPTION, but we'll leave that as ...
                    Wellesley
                  • How To Create a Quotes Slideshow - W3Schools
                    Step 1) Add HTML: Example. I love you the more in that I believe you had liked me for my own sake and for nothing else - John K...
                    W3Schools
                  • multiple slidershows on one site? - javascript - Stack Overflow
                    * 1 Answer. Sorted by: Try a class: Copy. var image1 = new Image(); image1.src = "bilder/tfb_g/slide1.jpg"; var image2 = new Image...
                    Stack Overflow
                  • Having Trouble With Multiple Slideshows On One Page
                    Image here--> ❮ ❯ ❮ ❯
                    SitePoint
                  • Multiple Slideshows - W3Schools Tryit Editor
                    DOCTYPE html> Multiple Slideshows Slideshow 1: ❮ ❯ Slideshow 2: ❮ ❯ DOCTYPE html>
                    W3Schools
                  • How To Create a Slideshow - W3Schools
                    Example. * {box-sizing:border-box} /* Slideshow container */ .slideshow-container { max-width: 1000px; position: relative; margin:
                    W3Schools
                  • w3schools multiple slideshow tutorial - additional slideshows
                    * 1 Answer. Sorted by: Change your slideIndex and slideId to include members for the third slideshow. Then call showSlides for the...
                    Stack Overflow
                  Show all
                  can you show mw how the javascript should look when its corect

                  February 03, 2026

                  Here is exactly how your JavaScript should look to handle all of your slideshows correctly.
                   
                  The Correct JavaScript 
                  Replace your current script entirely with this one. It uses arrays to store the status of each slideshow so they don't interfere with each other. 
                  javascript
                  <script>
                  // 1. ADD A '1' FOR EVERY SLIDESHOW ON YOUR PAGE
                  // If you have 5 slideshows, it should look like [1, 1, 1, 1, 1]
                  let slideIndex = [1, 1]; 
                  
                  // 2. ADD THE EXACT CLASS NAMES YOU USED IN YOUR HTML
                  // Ensure these match the class names of your slides (e.g., mySlides5, mySlides2)
                  let slideId = ["mySlides5", "mySlides2"]; 
                  
                  // Initialize all slideshows on load
                  for (let i = 0; i < slideId.length; i++) {
                    showSlides(1, i);
                  }
                  
                  // Function called by the Prev/Next buttons
                  function plusSlides(n, no) {
                    showSlides(slideIndex[no] += n, no);
                  }
                  
                  // The core function that hides/shows the correct images
                  function showSlides(n, no) {
                    let i;
                    let x = document.getElementsByClassName(slideId[no]);
                    
                    // Wrap around logic (goes from last image back to first)
                    if (n > x.length) {slideIndex[no] = 1}    
                    if (n < 1) {slideIndex[no] = x.length}
                    
                    // Hides all images in THIS specific slideshow only
                    for (i = 0; i < x.length; i++) {
                       x[i].style.display = "none";  
                    }
                    
                    // Displays the current image
                    if (x.length > 0) {
                      x[slideIndex[no]-1].style.display = "block";  
                    }
                  }
                  </script>
                  
                  Use code with caution.
                  What you must check in your HTML: 
                  For this JavaScript to work, the buttons in your HTML must pass two numbers: (MoveDirection, SlideshowIndex). 
                  1. For your first slideshow (mySlides5):
                    • Change Prev button to: onclick="plusSlides(-1, 0)"
                    • Change Next button to: onclick="plusSlides(1, 0)"
                  2. For your second slideshow (mySlides2):
                    • Change Prev button to: onclick="plusSlides(-1, 1)"
                    • Change Next button to: onclick="plusSlides(1, 1)"
                  3. For any future slideshows:
                    • Add a new class name to the slideId array and a 1 to the slideIndex array in the script above.
                    • Set the second number in the button's onclick to 2, 3, etc. 
                  What to delete in your script section: 
                  • DELETE var slideIndex = 1; (The new let slideIndex = [1, 1]; replaces it).
                  • DELETE any old function showSlides(n) or function flightSlides(n) that only takes one number.
                  • DELETE any duplicate <script> blocks to keep everything clean in one place. 
                  Creating a public link...
                  Helpful
                  Not helpful
                  Thank you
                  Your feedback helps Google improve. See our Privacy Policy.
                  Share more feedbackReport a problemClose
                  • Manual Slideshow > Multiple Slideshows Issue - JavaScript
                    ie. var slideId = ["mySlides1", "mySlides2", "mySlides3", "mySlides4", "mySlides5",mySlides6",etc] showDivs(1, 0); showDivs(1, 1);
                    W3Schools Forum
                  • Multiple Slideshows - W3Schools Tryit Editor
                    DOCTYPE html> Multiple Slideshows Slideshow 1: ❮ ❯ Slideshow 2: ❮ ❯ DOCTYPE html>
                    W3Schools
                  • Manual Slideshow > Multiple Slideshows Issue - JavaScript
                    ie. var slideId = ["mySlides1", "mySlides2", "mySlides3", "mySlides4", "mySlides5",mySlides6",etc] showDivs(1, 0); showDivs(1, 1);
                    W3Schools Forum
                  • Multiple slideshows on one page makes the first one not work ...
                    Get slide buttons working with multiple slideshows * Rename n to a more meaningful name. * slideIndex shouldn't be reassigned in t...
                    SitePoint
                  • How to enable multiple javascript slideshows on one page?
                    var slideIndex = 1; var indexes = document. querySelectorAll(". numbertext span"); var slides = document. getElementsByClassName("
                    Stack Overflow
                  • Multiple slideshows on one page makes the first one not work ...
                    * Setting and retrieving slideIndex value on container. We can have two separate functions called getIndex and setIndex, to help s...
                    SitePoint
                  • What this code means? - JavaScript - The freeCodeCamp Forum
                    // function triggered by arrows on left and right of picture function plusSlides(n) { slideIndex = slideIndex + n; showSlides(slid...
                    The freeCodeCamp Forum
                  • How To Build a Carousel With Automatic and Manual Controls
                    JavaScript * function plusSlides(n){ clearInterval(myTimer); if (n < 0){ showSlides(slideIndex -= 1); } else { showSlides(slideInd...
                    Better Programming
                  • Multiple Slideshows - W3Schools Tryit Editor
                    DOCTYPE html> Multiple Slideshows Slideshow 1: ❮ ❯ Slideshow 2: ❮ ❯ DOCTYPE html>
                    W3Schools
                  • Manual Slideshow > Multiple Slideshows Issue - JavaScript
                    ie. var slideId = ["mySlides1", "mySlides2", "mySlides3", "mySlides4", "mySlides5",mySlides6",etc] showDivs(1, 0); showDivs(1, 1);
                    W3Schools Forum
                  • Multiple slideshows on one page makes the first one not work ...
                    Get slide buttons working with multiple slideshows * Rename n to a more meaningful name. * slideIndex shouldn't be reassigned in t...
                    SitePoint
                  Show all
                  where is the var slideIndex in my code i dont see it

                  February 03, 2026

                  If you don't see
                  var slideIndex in the HTML you shared, it is because it was likely part of a JavaScript snippet you were using separately or it hasn't been added yet. 
                  In many standard tutorials (like W3Schools), var slideIndex = 1; is used as a "global variable" to track which picture is currently showing. For multiple slideshows, you must not use that single variable because it can only track one slideshow at a time. 
                  How to confirm if it exists 
                  If you want to be 100% sure it's not hidden elsewhere: 
                  1. Search your files: Open your HTML or JS file in an editor and press Ctrl + F (Windows) or Cmd + F (Mac) and type slideIndex.
                  2. Use Browser Tools: Right-click your webpage, select Inspect, then press Ctrl + Shift + F in the DevTools to search all loaded code for that variable. 
                  What to do now 
                  Since it isn't there, you have a clean slate! You can skip "deleting" and simply add the new multi-slideshow logic: 
                  1. Add the new variable: Use an array instead of a single variable so each slideshow has its own index:
                    javascript
                    let slideIndex =; // Add a '1' for every slideshow you have
                    
                    Use code with caution.
                  2. Update your functions: Use the functions provided in the previous response that take two numbers (e.g., plusSlides(n, no)), which allows the code to know which slideshow is being clicked. 
                  Creating a public link...
                  Helpful
                  Not helpful
                  Thank you
                  Your feedback helps Google improve. See our Privacy Policy.
                  Share more feedbackReport a problemClose
                  • What this code means? - JavaScript - The freeCodeCamp Forum
                    With both functions above, the n is passed into those functions through the inline javascript in the html (the onclick attributes)
                    The freeCodeCamp Forum
                  • How do I see all the javascript functions and variables on a page in ...
                    * 1. functions and variables that are defined in
                    Stack Overflow
                  • How To Debug JavaScript In Chrome DevTools - DebugBear
                    In this article we'll take a look at how you can debug JavaScript with Chrome DevTools and look at some advanced breakpoint functi...
                    DebugBear
                  • need help Understanding javascript gallery code - Stack Overflow
                    Note that this function is also never actually called in the code that you have posted. ... function showSlides(n) { var i; var sl...
                    Stack Overflow
                  • Problem with Java Script Function : r/learnjavascript - Reddit
                    You then have the showSlide function itself to check slideIndex is within the correct range, hides the slides you don't want to se...
                    Reddit
                  • What this code means? - JavaScript - The freeCodeCamp Forum
                    With both functions above, the n is passed into those functions through the inline javascript in the html (the onclick attributes)
                    The freeCodeCamp Forum
                  • How do I see all the javascript functions and variables on a page in ...
                    * 1. functions and variables that are defined in
                    Stack Overflow
                  • How To Debug JavaScript In Chrome DevTools - DebugBear
                    In this article we'll take a look at how you can debug JavaScript with Chrome DevTools and look at some advanced breakpoint functi...
                    DebugBear
                  Show all
                  yes absolutely one second thankyou

                  February 03, 2026

                  No problem at all! Take your time.
                   
                  Whenever you are ready, just paste your code or ask your next question. I'll be here to help you get those slideshows running perfectly. 
                  Creating a public link...
                  Helpful
                  Not helpful
                  Thank you
                  Your feedback helps Google improve. See our Privacy Policy.
                  Share more feedbackReport a problemClose
                      Show all
                      <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Past-Events Page</title> <link rel="stylesheet" href="/styles.css"> <link rel="stylesheet" href="/default.css"></head><body> <nav class="navbar"> <ul class="nav-list page-container"> <li><a href="/index.html"><h3>Home</h3></a></li> <li> <a href="#"><h3>Events</h3></a> <ul class="nav-list dropdown"> <li><a href="/past-events.html"><h3>Past Events</h3></a></li> <li class="dropdown-radius"><a href="Upcoming-Events.html"><h3>Upcoming Events</h3></a></li> </ul> </li> <li> <a href="#"><h3>Support</h3></a> <ul class="nav-list dropdown"> <li><a href="/support.html"><h3>Volunteer</h3></a></li> <li><a href="/donate.html"><h3>Donate</h3></a></li> <li class="dropdown-radius"><a href="/contact.html"><h3>Contact</h3></a></li> <li class="dropdown-radius"><a href="/sponsorships.html"><h3>Sponsorship</h3></a></li> </ul> </li> </ul> </nav> <div class="topnav" id="myTopnav"> <a href="/index.html" class="active"><h3>Home</h3></a> <div class="dropdown"> <button class="dropbtn">Events <i class="fa fa-caret-down"></i> </button> <div class="dropdown-content"> <a href="/events.html">Events</a> <a href="/past-events.html">Past Events</a> <a href="/Upcoming-Events.html">Upcoming Events</a> </div> </div> <div class="dropdown"> <button class="dropbtn">Support <i class="fa fa-caret-down"></i> </button> <div class="dropdown-content"> <a href="/support.html">Volunteer</a> <a href="/donate.html">Donate</a> <a href="/contact.html">Contact</a> <a href="/sponsorships.html">Sponsorship</a> </div> </div> <a href="javascript:void(0);" class="icon" onclick="myFunction()">☰</a> </div> <header> <h1 style="text-align: center;" class="past-htwo">Past Events</h1> </header> <h2 class="past-htwo">2025 Back2School Youth Day Spa</h2> <div class="sponsor-layout mobile-page-container page-container"> <div class="past-image-vertical"> <img class="b2s-img-layout" src="/images/Flyers/Back 2 School Flyer.png"> </div> <div class="sponsor-names"> <h2>Sponsors</h2> <p>Ambiance Beauty Bar</p> <p>BNI Roundtable Chapter</p> <p>T&T Tax services</p> <p>Toni Hokanson-Farmer insurance</p> <p>Saar’s super saver foods- </p> <p>Evergreen Beauty College </p> <p>Evergreen drill and drum line</p> <p>Dynasty Designz</p> <p>Villagers</p> </div> </div> <h2 class="past-htwo">2025 Military Youth Day Spa</h2> <div class="sponsor-layout mobile-page-container page-container"> <div class="past-image-vertical"> <div class="mySlides5"> <div class="numbertext"></div> <img src="/images/2025 Military Youth Day Spa/salute to the youth.jpeg" alt="mil-flyer"> </div> <div class="mySlides5"> <div class="numbertext"></div> <img src="/images/2025 Military Youth Day Spa/2025-03-23 12.48.23.jpg" alt="mil-one"> </div> <div class="mySlides5"> <div class="numbertext"></div> <img src="/images/2025 Military Youth Day Spa/2025-03-23 12.48.46.jpg" alt="mil-two"> </div> <div class="mySlides5"> <div class="numbertext"></div> <img src="/images/2025 Military Youth Day Spa/2025-03-23 12.49.09.jpg" alt="mil-three"> </div> <div class="mySlides5"> <div class="numbertext"></div> <img src="/images/2025 Military Youth Day Spa/2025-03-23 12.49.11.jpg" alt="mil-four"> </div> <div class="mySlides5"> <div class="numbertext"></div> <img src="/images/2025 Military Youth Day Spa/2025-03-23 12.49.23.jpg" alt="mil-five"> </div> <div class="mySlides5"> <div class="numbertext"></div> <img src="/images/2025 Military Youth Day Spa/2025-03-23 12.49.59.jpg" alt="mil-six"> </div> <div class="mySlides5"> <div class="numbertext"></div> <img src="/images/2025 Military Youth Day Spa/2025-03-23 12.50.01.jpg" alt="mil-seven"> </div> <div class="mySlides5"> <div class="numbertext"></div> <img src="/images/2025 Military Youth Day Spa/2025-03-23 12.50.25.jpg" alt="mil-eight"> </div> <div class="mySlides5"> <div class="numbertext"></div> <img src="/images/2025 Military Youth Day Spa/2025-03-23 12.50.34.jpg" alt="mil-nine"> </div> <div class="mySlides5"> <div class="numbertext"></div> <img src="/images/2025 Military Youth Day Spa/2025-03-23 12.51.16.jpg" alt="mil-ten"> </div> <div class="mySlides5"> <div class="numbertext"></div> <img src="/images/2025 Military Youth Day Spa/2025-03-23 12.51.34.jpg" alt="mil-eleven"> </div> <div class="mySlides5"> <div class="numbertext"></div> <img src="/images/2025 Military Youth Day Spa/arts & crafts MDYSD.JPG" alt="mil-twelve"> </div> <div class="mySlides5"> <div class="numbertext"></div> <img src="/images/2025 Military Youth Day Spa/IMG_1704.JPG" alt="mil-thirteen"> </div> <div class="mySlides5"> <div class="numbertext"></div> <img src="/images/2025 Military Youth Day Spa/IMG_1705.JPG" alt="mil-fourteen"> </div> <div class="mySlides5"> <div class="numbertext"></div> <img src="/images/2025 Military Youth Day Spa/IMG_1707.JPG" alt="mil-fifteen"> </div> <div class="mySlides5"> <div class="numbertext"></div> <img src="/images/2025 Military Youth Day Spa/IMG_1708.JPG" alt="mil-sixteen"> </div> <div class="mySlides5"> <div class="numbertext"></div> <img src="/images/2025 Military Youth Day Spa/NWTQ8742.JPEG" alt="mil-seventeen"> </div> <a class="prev" onclick="flightSlides(-1, 0)">❮</a> <a class="next" onclick="flightSlides(1, 0)">❯</a> <br> </div> <div class="sponsor-names"> <h2>Sponsors</h2> <p>Charlie’s Angel’s Unisex Salon</p> <p>Behind the Chair Foundation</p> <p>The Lions Den-Roop and Bryanna </p> <p>Rockstar Crown Royalty</p> <p>Overtones Salon</p> <p>Monticello Methodist Church</p> <p>Sandy Warren</p> <p>Snack Shack</p> <p>Adams </p> <p>Price Chopper</p> <p>Hannafords</p> <p>Sound of life</p> <p>Villagers</p> </div></div> <h2 class="past-htwo">2024 Holiday Day Spa with Behind the Chair Foundation <br> Youth of Incarcerated Parent</h2> <div class="sponsor-layout mobile-page-container page-container"> <div class="past-image-vertical"> <div class="mySlides2"> <div class="numbertext">Flyer</div> <img src="/images/Holiday kids day spa flyer.JPG" alt="hol-ten" style="width: 100%;"> </div> <div class="mySlides2"> <div class="numbertext">1/11</div> <img src="/images/Holiday kids day spa/IMG_8281.JPG" alt="hol-ten" style="width: 100%;"> </div> <div class="mySlides2"> <div class="numbertext">2/11</div> <img src="/images/Holiday kids day spa/IMG_8283.JPG" alt="hol-eleven"> </div> <div class="mySlides2"> <div class="numbertext">3/11</div> <img src="/images/Holiday kids day spa/IMG_8284.JPG" alt="hol-twelve"> </div> <div class="mySlides2"> <div class="numbertext">4/11</div> <img src="/images/Holiday kids day spa/IMG_8286.JPG" alt="hol-thirteen"> </div> <div class="mySlides2"> <div class="numbertext">5/11</div> <img src="/images/Holiday kids day spa/IMG_8287.JPG" alt="hol-fourteen"> </div> <div class="mySlides2"> <div class="numbertext">6/11</div> <img src="/images/Holiday kids day spa/IMG_8288.JPG" a

                      February 03, 2026

                      To implement this correctly in your code, you need to make
                      three specific changes. 
                      Since your code snippet ends abruptly, I have provided the logic for the two slideshows visible (mySlides5 and mySlides2). 
                      1. Update the Buttons (HTML) 
                      In your HTML, you currently have flightSlides. You need to change that to plusSlides and ensure the second number (the index) matches the slideshow. 
                      For Military Youth Day Spa (Slideshow 0): 
                      html
                      <a class="prev" onclick="plusSlides(-1, 0)">❮</a>
                      <a class="next" onclick="plusSlides(1, 0)">❯</a>
                      
                      Use code with caution.
                      For Holiday Day Spa (Slideshow 1):
                      Scroll down to where this slideshow ends in your code and add these buttons: 
                      html
                      <a class="prev" onclick="plusSlides(-1, 1)">❮</a>
                      <a class="next" onclick="plusSlides(1, 1)">❯</a>
                      
                      Use code with caution.

                      2. Add the JavaScript (Place this at the very bottom) 
                      Delete any existing slideshow scripts you have and paste this right before your </body> tag. This script is designed to handle as many slideshows as you need. 
                      javascript
                      <script>
                      // Each '1' in this array tracks the current slide of a different slideshow
                      let slideIndex =; 
                      
                      // These must match the class names used in your HTML divs
                      let slideId = ["mySlides5", "mySlides2"]; 
                      
                      // Initialize all slideshows on page load
                      for (let i = 0; i < slideId.length; i++) {
                        showSlides(1, i);
                      }
                      
                      // This function is triggered by your button clicks
                      function plusSlides(n, no) {
                        showSlides(slideIndex[no] += n, no);
                      }
                      
                      function showSlides(n, no) {
                        let i;
                        let x = document.getElementsByClassName(slideId[no]);
                        
                        // If you go past the last image, go back to the first
                        if (n > x.length) {slideIndex[no] = 1}    
                        // If you go before the first image, go to the last
                        if (n < 1) {slideIndex[no] = x.length}
                        
                        // Hide all images in this specific slideshow group
                        for (i = 0; i < x.length; i++) {
                          x[i].style.display = "none";  
                        }
                        
                        // Show the active image
                        if (x.length > 0) {
                          x[slideIndex[no]-1].style.display = "block";  
                        }
                      }
                      
                      // Your existing Nav function (keep this if you are using it)
                      function myFunction() {
                        var x = document.getElementById("myTopnav");
                        if (x.className === "topnav") {
                          x.className += " responsive";
                        } else {
                          x.className = "topnav";
                        }
                      }
                      </script>
                      
                      Use code with caution.

                      3. Add this to your CSS (styles.css) 
                      If you don't do this, all images will appear in a long list until you click a button. Add this to ensure only one image shows at a time: 
                      css
                      .mySlides5, .mySlides2 {
                        display: none;
                      }
                      
                      Use code with caution.
                      How to add more slideshows later: 
                      1. Give the new images a new class (e.g., class="mySlides3").
                      2. Add a 1 to the slideIndex array in the script: [1, 1, 1].
                      3. Add the name to the slideId array: ["mySlides5", "mySlides2", "mySlides3"].
                      4. Set the buttons for that section to use index 2: onclick="plusSlides(1, 2)". 
                      Creating a public link...
                      Helpful
                      Not helpful
                      Thank you
                      Your feedback helps Google improve. See our Privacy Policy.
                      Share more feedbackReport a problemClose
                          Show all
                          sorry i didnt realize the code i sent was cut off im going to send it again

                          February 03, 2026

                          To implement multiple slideshows correctly using your HTML, follow these precise steps. I've updated the logic to handle all your sections independently.
                           
                          1. Update the HTML Buttons 
                          For every slideshow on your page, you need to update the onclick buttons. The second number in the function must be unique for each slideshow (0, 1, 2, etc.). 
                          For "Military Youth Day Spa" (Slideshow Index 0): 
                          html
                          <a class="prev" onclick="plusSlides(-1, 0)">❮</a>
                          <a class="next" onclick="plusSlides(1, 0)">❯</a>
                          
                          Use code with caution.
                          For "Holiday Day Spa" (Slideshow Index 1): 
                          html
                          <a class="prev" onclick="plusSlides(-1, 1)">❮</a>
                          <a class="next" onclick="plusSlides(1, 1)">❯</a>
                          
                          Use code with caution.
                          For any other sections (Index 2, 3, etc.):
                          Continue incrementing that second number for each new slider you have. 
                          2. Replace the JavaScript Section 
                          Delete any existing flightSlides or showSlides functions and paste this at the very bottom of your page, before the </body> tag. 
                          javascript
                          <script>
                          // 1. Array to track the current slide of EACH slideshow independently
                          // Add a '1' here for every slideshow on your page.
                          let slideIndex =; 
                          
                          // 2. Exact class names of your slide divs
                          // List every class you used in your HTML (mySlides5, mySlides2, etc.)
                          let slideId = ["mySlides5", "mySlides2"]; 
                          
                          // Initialize all slideshows
                          for (let i = 0; i < slideId.length; i++) {
                            showSlides(1, i);
                          }
                          
                          // Function called by your Prev/Next buttons
                          function plusSlides(n, no) {
                            showSlides(slideIndex[no] += n, no);
                          }
                          
                          function showSlides(n, no) {
                            let i;
                            let x = document.getElementsByClassName(slideId[no]);
                            
                            // Wrap logic: goes back to first slide if you hit 'next' on the last one
                            if (n > x.length) {slideIndex[no] = 1}    
                            if (n < 1) {slideIndex[no] = x.length}
                            
                            // Hide all images in ONLY this specific slideshow group
                            for (i = 0; i < x.length; i++) {
                               x[i].style.display = "none";  
                            }
                            
                            // Display the active image
                            if (x.length > 0) {
                              x[slideIndex[no]-1].style.display = "block";  
                            }
                          }
                          </script>
                          
                          Use code with caution.
                          3. Add this to your CSS 
                          To ensure the slideshows start correctly, add these lines to your styles.css so images don't stack on top of each other before the script runs. 
                          css
                          /* Add the class name for every slideshow you have here */
                          .mySlides5, .mySlides2 {
                            display: none;
                          }
                          
                          Use code with caution.
                          Key Changes Made: 
                          • Variable Management: Replaced a single variable with an array (slideIndex).
                          • Targeting: The script now uses the index number provided by the button to identify which specific list of images to hide and show.
                          • Initial Load: Added a loop to automatically start every slider as soon as the page loads. 
                          Creating a public link...
                          Helpful
                          Not helpful
                          Thank you
                          Your feedback helps Google improve. See our Privacy Policy.
                          Share more feedbackReport a problemClose
                          • HTML Page to Display Multiple Slideshows - Stack Overflow
                            function carousel(className, slideStart) { var i; var myIndex = slideStart; var x = document. getElementsByClassName(className); f...
                            Stack Overflow
                          • How do I make multiple slideshows in the same html document?
                            * 1 Answer. Sorted by: 8. Assign an id to each slide container and provide that to all of the slideshow functions. In addition, us...
                            Stack Overflow
                          • Multiple Image Galleries in a Single Page using ES6 JavaScript
                            Inside our gallery-container , we have the mySlides div, which is a single Image slide, this contains the number of the image, a f...
                            www.shawndsilva.com
                          • How do I make multiple slideshows in the same html document?
                            * 1 Answer. Sorted by: Assign an id to each slide container and provide that to all of the slideshow functions. In addition, use t...
                            Stack Overflow
                          • Having Trouble With Multiple Slideshows On One Page
                            DOCTYPE html>
                            SitePoint
                          • making two slideshows html - javascript - Stack Overflow
                            Both your s have the name "slide". You should give them different names so that the browser knows which one to work with. Somethin...
                            Stack Overflow
                          • Arrays and Slideshows - Computer Science - Wellesley College
                            getElementById("slideshow"). src = url; } We really should do something about the ALT and the FIGCAPTION, but we'll leave that as ...
                            Wellesley
                          • HTML Page to Display Multiple Slideshows - Stack Overflow
                            function carousel(className, slideStart) { var i; var myIndex = slideStart; var x = document. getElementsByClassName(className); f...
                            Stack Overflow
                          • How do I make multiple slideshows in the same html document?
                            * 1 Answer. Sorted by: 8. Assign an id to each slide container and provide that to all of the slideshow functions. In addition, us...
                            Stack Overflow
                          • Multiple Image Galleries in a Single Page using ES6 JavaScript
                            Inside our gallery-container , we have the mySlides div, which is a single Image slide, this contains the number of the image, a f...
                            www.shawndsilva.com
                          Show all
                          <div class="mySlides2"> <div class="numbertext">7/11</div> <img src="/images/Holiday kids day spa/IMG_8289.JPG" alt="hol-sixteen"> </div> <div class="mySlides2"> <div class="numbertext">8/11</div> <img src="/images/Holiday kids day spa/IMG_8290.JPG" alt="hol-seventeen"> </div> <div class="mySlides2"> <div class="numbertext">9/11</div> <img src="/images/Holiday kids day spa/IMG_8292.JPG" alt="hol-eighteen"> </div> <div class="mySlides2"> <div class="numbertext">10/11</div> <img src="/images/Holiday kids day spa/IMG_8285.JPG" alt="hol-nineteen"> </div> <div class="mySlides2"> <div class="numbertext">11/11</div> <img src="/images/Holiday kids day spa/IMG_8298.JPG" alt="hol-twenty"> </div> <a class="prev" onclick="plusSlides(-1, 1)">❮</a> <a class="next" onclick="plusSlides(1, 1)">❯</a> </div> <div class="sponsor-names"> <h2>Sponsors</h2> <p>Host- Split Enz Hair Studio</p> <p>CSEA/VOICE Local 100A</p> <p>HOT-N-TOTS Children Center</p> <p>Cosmoprof</p> <p>C & C Unisex Poughkeepsie</p> <p>Monticello Methodist Church</p> <p>Adams</p> <p>Hannafords</p> <p>Price Chopper</p> <p>CosmoProf</p> <p>Villagers</p> </div> </div> <h2 class="past-htwo">2024 Back2School Youth Day Spa</h2> <div class="past-events mobile-page-container page-container"> <section class="past-section"> <div class="sponsor-layout mobile-page-container page-container"> <div class="past-image-vertical past-image-vertical-one"> <div class="mySlides1"> <div class="numbertext">Flyer</div> <img src="/images/Flyers/6454312585190235839.jpg" alt="hol-ten" style="width: 100%;"> </div> <div class="mySlides1"> <div class="numbertext">1/16</div> <img src="/images/Backpacks.svg" alt="img-one" style="width: 100%;"> </div> <div class="mySlides1"> <div class="numbertext">1/16</div> <img src="/images/Past Events Two women.svg" alt="img-one" style="width: 100%;"> </div> <div class="mySlides1"> <div class="numbertext">1/16</div> <img src="/images/Past Events one woman.svg" alt="img-one" style="width: 100%;"> </div> <div class="mySlides1"> <div class="numbertext">1/16</div> <img src="/images/B2S Photos/IMG_2143.jpg" alt="img-one" style="width: 100%;"> </div> <div class="mySlides1"> <div class="numbertext">2/16</div> <img src="/images/B2S Photos/IMG_2174.jpg" alt="img-four" style="width: 100%;"> </div> <div class="mySlides1"> <div class="numbertext">3/16</div> <img src="/images/B2S Photos/IMG_4724.jpg" alt="img-five" style="width: 100%;"> </div> <div class="mySlides1"> <div class="numbertext">4/16</div> <img src="/images/B2S Photos/IMG_4729.jpg" alt="img-seven" style="width: 100%;"> </div> <div class="mySlides1"> <div class="numbertext">5/16</div> <img src="/images/B2S Photos/IMG_4731.jpg" alt="img-eight" style="width: 100%;"> </div> <div class="mySlides1"> <div class="numbertext">6/16</div> <img src="/images/B2S Photos/IMG_4732.jpg" alt="img-nine" style="width: 100%;"> </div> <div class="mySlides1"> <div class="numbertext">7/16</div> <img src="/images/B2S Photos/IMG_4734.jpg" alt="img-ten" style="width: 100%;"> </div> <div class="mySlides1"> <div class="numbertext">8/16</div> <img src="/images/B2S Photos/IMG_7691.jpg" alt="img-eleven" style="width: 100%;"> </div> <div class="mySlides1"> <div class="numbertext">9/16</div> <img src="/images/B2S Photos/IMG_7692.JPG" alt="img-twelve" style="width: 100%;"> </div> <div class="mySlides1"> <div class="numbertext">10/16</div> <img src="/images/B2S Photos/IMG_7693.jpg" alt="img-thirteen" style="width: 100%;"> </div> <div class="mySlides1"> <div class="numbertext">11/16</div> <img src="/images/B2S Photos/IMG_7694.jpg" alt="img-fourteen" style="width: 100%;"> </div> <div class="mySlides1"> <div class="numbertext">12/16</div> <img src="/images/B2S Photos/IMG_7702.JPG" alt="img-sixteen" style="width: 100%;"> </div> <div class="mySlides1"> <div class="numbertext">13/16</div> <img src="/images/B2S Photos/IMG_7708.jpg" alt="img-seventeen" style="width: 100%;"> </div> <div class="mySlides1"> <div class="numbertext">14/16</div> <img src="/images/B2S Photos/IMG_7710.jpg" alt="img-eighteen" style="width: 100%;"> </div> <div class="mySlides1"> <div class="numbertext">15/16</div> <img src="/images/B2S Photos/IMG_7712.jpg" alt="img-nineteen" style="width: 100%;"> </div> <div class="mySlides1"> <div class="numbertext">16/16</div> <img src="/images/B2S Photos/IMG_7713.JPG" alt="img-twenty" style="width: 100%;"> </div> <div class="mySlides1"> <div class="numbertext">1/4</div> <img src="/images/B2S Photos/IMG_2154.jpg" alt="img-two"> </div> <div class="mySlides1"> <div class="numbertext">2/4</div> <img src="/images/B2S Photos/IMG_2155.jpg" alt="img-three"> </div> <div class="mySlides1"> <div class="numbertext">3/4</div> <img src="/images/B2S Photos/IMG_4727.jpg" alt="img-six"> </div> <div class="mySlides1"> <div class="numbertext">4/4</div> <img src="/images/B2S Photos/IMG_7695.jpg" alt="img-fifteen"> </div> <a class="prev" onclick="plusSlides(-1, 0)">❮</a> <a class="next" onclick="plusSlides(1, 0)">❯</a> </div> </div> <div class="video"> <iframe width="500px" height="600" src="https://www.youtube.com/embed/KCT2M4_2hhU" title="Back to school kids day spa" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe> </div> <div class="sponsor-names sponsornames"> <h2>Sponsors</h2> <p>Host- Maria’s Hair Salon</p> <p>Alloy Studio</p> <p>One Strike</p> <p>HOT-N-TOTS Children Center</p> <p>Monticello Methodist Church</p> <p>Villagers</p> <p>Adams</p> <p>Sam’s Club</p> <p>Seasoned Gives</p> </div> </section> </div> <h2 class="past-htwo">2023 Christmas Cookies and Crafts</h2> <div class="sponsor-layout mobile-page-container page-container"> <div class="past-events-layout past-events-layout-two"> <div class="past-image-vertical"> <div class="mySlides3"> <div class="numbertext">Flyer</div> <img src="/images/Holiday kids day spa/76E054A7-9CED-4152-8AED-776E74C15AA4.PNG" alt="cook-flyer"> </div> <div class="mySlides3"> <div class="numbertext">1/8</div> <img src="/images/Holiday kids day spa/IMG_6908.jpg" alt="cook-one"> </div> <div class="mySlides3"> <div class="numbertext">2/8</div> <img src="/images/Holiday kids day spa/IMG_6909.jpg" alt="cook-two

                          February 03, 2026

                          Thanks for sending the rest! Now that I can see the full class names and your structure, here is exactly how to set up your JavaScript.
                           
                          1. Update your Buttons (HTML) 
                          Each slideshow needs a specific "ID" number in the onclick attribute. Based on your code, here is the map: 
                          • 2024 Back2School (mySlides1): Change buttons to plusSlides(n, 0)
                          • 2024 Holiday Spa (mySlides2): Change buttons to plusSlides(n, 1)
                          • 2023 Cookies & Crafts (mySlides3): Change buttons to plusSlides(n, 2)
                          • 2025 Military Spa (mySlides5): Change buttons to plusSlides(n, 3) 
                          2. The Final JavaScript 
                          Delete any existing slideshow scripts and paste this at the very bottom of your file, right before the </body> tag. 
                          javascript
                          <script>
                          // Array to keep track of the current slide for each of your 4 slideshows
                          let slideIndex = [1, 1, 1, 1]; 
                          
                          // Array of the class names you used in your HTML
                          let slideId = ["mySlides1", "mySlides2", "mySlides3", "mySlides5"]; 
                          
                          // Initialize all slideshows on page load
                          for (let i = 0; i < slideId.length; i++) {
                            showSlides(1, i);
                          }
                          
                          // Function called by the arrows in your HTML
                          function plusSlides(n, no) {
                            showSlides(slideIndex[no] += n, no);
                          }
                          
                          function showSlides(n, no) {
                            let i;
                            let x = document.getElementsByClassName(slideId[no]);
                            
                            // If no images are found for a class, stop the function to avoid errors
                            if (x.length === 0) return;
                          
                            // Wrap logic: back to first slide or jump to last
                            if (n > x.length) {slideIndex[no] = 1}    
                            if (n < 1) {slideIndex[no] = x.length}
                            
                            // Hide all images in this specific slideshow
                            for (i = 0; i < x.length; i++) {
                               x[i].style.display = "none";  
                            }
                            
                            // Show the current active image
                            x[slideIndex[no]-1].style.display = "block";  
                          }
                          
                          // Your existing mobile menu function
                          function myFunction() {
                            var x = document.getElementById("myTopnav");
                            if (x.className === "topnav") {
                              x.className += " responsive";
                            } else {
                              x.className = "topnav";
                            }
                          }
                          </script>
                          
                          Use code with caution.
                          3. Essential CSS (styles.css) 
                          Add this to your CSS file so that images don't display in a giant list before the JavaScript loads: 
                          css
                          /* Hide all slides by default */
                          .mySlides1, .mySlides2, .mySlides3, .mySlides5 {
                            display: none;
                          }
                          
                          Use code with caution.
                          Quick Check: 
                          • Order matters: In the slideId array above, mySlides1 is index 0. That is why the buttons for mySlides1 must say plusSlides(n, 0).
                          • Missing buttons: In your code snippet for mySlides3 (Cookies and Crafts), make sure you add the <a class="prev"> and <a class="next"> buttons inside that div, using index 2. 
                          Creating a public link...
                          Helpful
                          Not helpful
                          Thank you
                          Your feedback helps Google improve. See our Privacy Policy.
                          Share more feedbackReport a problemClose
                              Show all
                              </div> <div class="mySlides3"> <div class="numbertext">3/8</div> <img src="/images/Holiday kids day spa/IMG_6910.jpg" alt="cook-three"> </div> <div class="mySlides3"> <div class="numbertext">4/8</div> <img src="/images/Holiday kids day spa/IMG_6911.jpg" alt="cook-four"> </div> <div class="mySlides3"> <div class="numbertext">5/8</div> <img src="/images/Holiday kids day spa/IMG_6912.jpg" alt="cook-five"> </div> <div class="mySlides3"> <div class="numbertext">6/8</div> <img src="/images/Holiday kids day spa/IMG_6913.jpg" alt="cook-six"> </div> <div class="mySlides3"> <div class="numbertext">7/8</div> <img src="/images/Holiday kids day spa/IMG_6914.jpg" alt="cook-seven"> </div> <div class="mySlides3"> <div class="numbertext">8/8</div> <img src="/images/Holiday kids day spa/IMG_6915.jpg" alt="cook-eight"> </div> <a class="prev" onclick="flusSlides(-1, 0)">❮</a> <a class="next" onclick="flusSlides(1, 0)">❯</a> </div> <br> </div> <div class="sponsor-names"> <h2>Sponsors</h2> <p>Host- Seasoned Gives</p> <p>Monticello Methodist Church</p> <p>Adams</p> <p>Price Chopper</p> <p>Hannafords</p> <p>Villagers</p> </div> </div> <h2 class="past-htwo">2023 1st Kids Day Spa <br> For Fostercare/Group Homes</h2> <div class="sponsor-layout mobile-page-container page-container"> <div class="past-image-vertical b2s-layout"> <div class="mySlides4"> <img src="/images/Flyers/2023 Flyer.jpg" alt="flyer"> </div> <div class="mySlides4"> <div class="numbertext">1/5</div> <img src="/images/first kids day spa/image000000.jpg" alt="first-two"> </div> <div class="mySlides4"> <div class="numbertext">2/5</div> <img src="/images/first kids day spa/image000003.jpg" alt="first-three"> </div> <div class="mySlides4"> <div class="numbertext">3/5</div> <img src="/images/first kids day spa/IMG_4064.jpg" alt="first-five"> </div> <div class="mySlides4"> <div class="numbertext">4/5</div> <img src="/images/first kids day spa/IMG_4067.jpg" alt="first-six"> </div> <div class="mySlides4"> <div class="numbertext">5/5</div> <img src="/images/first kids day spa/IMG_4058.jpg" alt="first-four"> </div> <a class="prev" onclick="flusSlides(-1, 1)">❮</a> <a class="next" onclick="flusSlides(1, 1)">❯</a> </div> <div class="sponsor-names"> <h2>Sponsors</h2> <p>Host- Seasoned Gives</p> <p>HOHA Academy</p> <p>C & C Unisex Kingston</p> <p>Advanced Skin Medspa</p> <p>Satz Hair</p> <p>One Strike</p> <p>Monticello Methodist Church</p> <p>Adams </p> <p>Price Chopper</p> <p>Villagers</p> </div> </div> <h2 class="past-htwo">Festival and Events Participation</h2> <div class="past-event-layout"><div class="sponsor-layout"> <div class="past-image-vertical"> <div class="mySlides6"> <div class="numbertext">1/12</div> <img src="/images/Festivals and Event Participation/AAMZ6643.JPG" alt="fest-one"> </div> <div class="mySlides6"> <div class="numbertext">2/12</div> <img src="/images/Festivals and Event Participation/ALUI3879.JPG" alt="fest-two"> </div> <div class="mySlides6"> <div class="numbertext">3/12</div> <img src="/images/Festivals and Event Participation/BCPN6717.JPG" alt="fest-three"> </div> <div class="mySlides6"> <div class="numbertext">4/12</div> <img src="/images/Festivals and Event Participation/BVRR4615.JPG" alt="fest-four"> </div> <div class="mySlides6"> <div class="numbertext">5/12</div> <img src="/images/Festivals and Event Participation/CGTH0338.JPG" alt="fest-five"> </div> <div class="mySlides6"> <div class="numbertext">6/12</div> <img src="/images/Festivals and Event Participation/CMAF6080.JPG" alt="fest-six"> </div> <div class="mySlides6"> <div class="numbertext">7/12</div> <img src="/images/Festivals and Event Participation/CZAH5233.JPG" alt="fest-seven"> </div> <div class="mySlides6"> <div class="numbertext">8/12</div> <img src="/images/Festivals and Event Participation/EYDM8674.JPG" alt="fest-eight"> </div> <div class="mySlides6"> <div class="numbertext">9/12</div> <img src="/images/Festivals and Event Participation/FQYS7532.JPG" alt="fest-nine"> </div> <div class="mySlides6"> <div class="numbertext">10/12</div> <img src="/images/Festivals and Event Participation/GMNG2964.JPG" alt="fest-ten"> </div> <div class="mySlides6"> <div class="numbertext">11/12</div> <img src="/images/Festivals and Event Participation/IMG_7940.WEBP" alt="fest-eleven"> </div> <div class="mySlides6"> <div class="numbertext">12/12</div> <img src="/images/Festivals and Event Participation/BFJM3934.JPG" alt="fest-twelve"> </div> <a class="prev" onclick="flightSlides(-1, 1)">❮</a> <a class="next" onclick="flightSlides(1, 1)">❯</a> <br> </div> <div class="sponsor-names"> <p>Fallsburg National Night Out</p> <p>Touch-a-Truck New Paltz</p> <p>Seasoned Gives Caribbean Carnival </p> <p>MyKington Kids Kite and Halloween Festival</p> </div> </div> </div> <footer> <div class="footer-container"> <div class="facebook-footer"> <a href="https://www.facebook.com/p/Brandens-Safe-House-100077497014724/"><i class="fa-brands fa-facebook"></i></a> </div> <div class="copyright-footer"><h5>&copy;Copyright 2025 BrandensSafeHouse.org</h5></div> </div> </footer> <script src="https://kit.fontawesome.com/3f6e3b3cfe.js" crossorigin="anonymous"></script> <script>function myFunction() { var x = document.getElementById("myTopnav"); if (x.className === "topnav") { x.className += " responsive"; } else { x.className = "topnav"; }} </script><script>let slideIndex = [1,1];/* Class the members of each slideshow group with different CSS classes */let slideId = ["mySlides1", "mySlides2"]showSlides(1, 0);showSlides(1, 1);function plusSlides(n, no) { showSlides(slideIndex[no] += n, no);}function showSlides(n, no) { let i; let x = document.getElementsByClassName(slideId[no]); if (n > x.length) {slideIndex[no] = 1} if (n < 1) {slideIndex[no] = x.length} for (i = 0; i < x.length; i++) { x[i].style.display = "none"; } x[slideIndex[no]-1].style.display = "block";}</script><script>let glideIndex = [1,1];/* Class the members of each slideshow group with different CSS classes */let glideId = ["mySlides3", "mySlides4"]khowSlides(1, 0);khowSlides(1, 1);function flusSlides(n, no) { khowSlides(glideIndex[no] += n, no);}function khowSlides(n, no) { let i; let x = document.getElementsByClassName(glideId[no]); if (n > x.length) {glideIndex[no] = 1} if (n < 1) {glideIndex[no] = x.length} for (i = 0; i < x.length; i++) { x[i].style.display = "none"; } x[glideIndex[no]-1].style.display = "block";}</script><script>let flyIndex = [1,1];/* Class the members of each slideshow group with different CSS classes */let flyId = ["mySlides5", "mySlides6"]flySlides(1, 0);flySlides(1, 1);function flightSlides(n, no) { flySlides(flyIndex[no] += n, no);}function flySlides(n, no) { let i; let x = document.getElementsByClassName(flyId[no]); if (n > x.length) {flyIndex[no] = 1} if (n < 1) {fl

                              February 03, 2026

                              You are very close! The reason it's likely not working is because you have three different scripts using different names (
                              plusSlides, flusSlides, flightSlides) and some typos like khowSlides. 
                              To make this simple and clean, delete all three of your slideshow scripts and replace them with this single, "Master Script." This one script handles all 6 of your slideshows perfectly. 
                              1. Delete these blocks: 
                              Remove everything between <script> and </script> for your slideshow logic (keep the myFunction nav script and the FontAwesome kit). 
                              2. Paste this single script: 
                              This replaces all the separate ones. It maps all your class names (mySlides1 through mySlides6) into one system. 
                              javascript
                              <script>
                              // One '1' for each of your 6 slideshows
                              let slideIndex = [1, 1, 1, 1, 1, 1]; 
                              
                              // List every class name you used in your HTML in order
                              let slideId = ["mySlides1", "mySlides2", "mySlides3", "mySlides4", "mySlides5", "mySlides6"]; 
                              
                              // Initialize all 6 slideshows
                              for (let i = 0; i < slideId.length; i++) {
                                showSlides(1, i);
                              }
                              
                              // All buttons (prev/next) should now call THIS function
                              function plusSlides(n, no) {
                                showSlides(slideIndex[no] += n, no);
                              }
                              
                              function showSlides(n, no) {
                                let i;
                                let x = document.getElementsByClassName(slideId[no]);
                                if (x.length === 0) return; // Safety check
                                
                                if (n > x.length) {slideIndex[no] = 1}
                                if (n < 1) {slideIndex[no] = x.length}
                                
                                for (i = 0; i < x.length; i++) {
                                  x[i].style.display = "none";
                                }
                                x[slideIndex[no]-1].style.display = "block";
                              }
                              </script>
                              
                              Use code with caution.
                              3. Update your HTML Buttons (The most important part) 
                              Because we are using one master script, you need to make sure the second number in your onclick matches the position in the slideId array above. 
                              Go through your HTML and change the buttons to match this list: 
                              Slideshow Section Change button onclick to...
                              Back2School (mySlides1)plusSlides(n, 0)
                              Holiday Spa (mySlides2)plusSlides(n, 1)
                              Cookies & Crafts (mySlides3)plusSlides(n, 2)
                              Fostercare Spa (mySlides4)plusSlides(n, 3)
                              Military Spa (mySlides5)plusSlides(n, 4)
                              Festivals (mySlides6)plusSlides(n, 5)
                              Example of what a button should look like now:
                              <a class="prev" onclick="plusSlides(-1, 2)">❮</a> (This would be for Cookies & Crafts). 
                              Why this is better: 
                              1. No typos: You don't have to worry about "flusSlides" vs "plusSlides."
                              2. One location: All your slideshow logic is in one place.
                              3. Memory: The browser only has to load one function instead of three slightly different ones. 
                              Creating a public link...
                              Helpful
                              Not helpful
                              Thank you
                              Your feedback helps Google improve. See our Privacy Policy.
                              Share more feedbackReport a problemClose
                                  Show all
                                  yIndex[no] = x.length} for (i = 0; i < x.length; i++) { x[i].style.display = "none"; } x[flyIndex[no]-1].style.display = "block";}</script> </body>

                                  February 03, 2026

                                  To get everything working perfectly, you should
                                  consolidate all those separate scripts into one. You currently have several scripts that are almost identical but use different names (like flusSlides, plusSlides, and flightSlides), which makes the code hard to manage and prone to typos (like khowSlides). 
                                  1. The "Master" JavaScript 
                                  Delete all the slideshow <script> blocks at the bottom of your file (everything after your myFunction) and replace them with this single one. It handles all 6 slideshows using one clean logic: 
                                  javascript
                                  <script>
                                  // Tracks the current slide for all 6 slideshows
                                  let slideIndex = [1, 1, 1, 1, 1, 1]; 
                                  
                                  // The class names used in your HTML, in order (Index 0 to 5)
                                  let slideId = ["mySlides1", "mySlides2", "mySlides3", "mySlides4", "mySlides5", "mySlides6"]; 
                                  
                                  // Initialize all slideshows on load
                                  for (let i = 0; i < slideId.length; i++) {
                                    showSlides(1, i);
                                  }
                                  
                                  // Every button on your page will now call this one function
                                  function plusSlides(n, no) {
                                    showSlides(slideIndex[no] += n, no);
                                  }
                                  
                                  function showSlides(n, no) {
                                    let i;
                                    let x = document.getElementsByClassName(slideId[no]);
                                    if (x.length === 0) return; // Prevents errors if a class is missing
                                  
                                    if (n > x.length) {slideIndex[no] = 1}
                                    if (n < 1) {slideIndex[no] = x.length}
                                    
                                    for (i = 0; i < x.length; i++) {
                                      x[i].style.display = "none";
                                    }
                                    x[slideIndex[no]-1].style.display = "block";
                                  }
                                  </script>
                                  
                                  Use code with caution.
                                  2. Update your HTML Buttons 
                                  Now, go through your HTML and make sure the buttons call plusSlides with the correct index number. The second number must match the list above (0-5). 
                                  • 2024 Back2School (mySlides1): Use plusSlides(n, 0)
                                  • 2024 Holiday Spa (mySlides2): Use plusSlides(n, 1)
                                  • 2023 Cookies & Crafts (mySlides3): Use plusSlides(n, 2)
                                  • 2023 Fostercare Spa (mySlides4): Use plusSlides(n, 3)
                                  • 2025 Military Spa (mySlides5): Use plusSlides(n, 4)
                                  • Festivals & Events (mySlides6): Use plusSlides(n, 5) 
                                  Example of a corrected button:
                                  <a class="prev" onclick="plusSlides(-1, 5)">❮</a> (for your Festival section). 
                                  3. CSS (Important) 
                                  Ensure your styles.css hides these classes by default, or they will all stack on top of each other when the page first loads: 
                                  css
                                  .mySlides1, .mySlides2, .mySlides3, .mySlides4, .mySlides5, .mySlides6 {
                                    display: none;
                                  }
                                  
                                  Use code with caution.
                                  Why this fix works: 
                                  • Fixes Typos: You had flusSlides and khowSlides in your last snippet; this uses one consistent name.
                                  • Independence: Because we use an array slideIndex[no], clicking one slideshow won't affect the others.
                                  • Cleanliness: You remove about 40 lines of redundant code. 
                                  Creating a public link...
                                  Helpful
                                  Not helpful
                                  Thank you
                                  Your feedback helps Google improve. See our Privacy Policy.
                                  Share more feedbackReport a problemClose
                                      Show all
                                      can you write the javascript so i can copy and paste it please

                                      February 03, 2026

                                      Here is the clean, consolidated JavaScript.
                                      Delete all your existing slideshow scripts and replace them with this single block. 
                                      I have set this up to handle all 6 slideshows you have in your HTML (mySlides1 through mySlides6). 
                                      javascript
                                      <script>
                                        // 1. Tracks the current slide for each of your 6 slideshows
                                        // Index:          0, 1, 2, 3, 4, 5
                                        let slideIndex = [1, 1, 1, 1, 1, 1]; 
                                      
                                        // 2. These are the exact class names used in your HTML
                                        let slideId = [
                                          "mySlides1", // Index 0 (Back2School)
                                          "mySlides2", // Index 1 (Holiday Spa)
                                          "mySlides3", // Index 2 (Cookies & Crafts)
                                          "mySlides4", // Index 3 (Fostercare)
                                          "mySlides5", // Index 4 (Military Spa)
                                          "mySlides6"  // Index 5 (Festivals)
                                        ]; 
                                      
                                        // 3. Initialize all 6 slideshows when the page loads
                                        for (let i = 0; i < slideId.length; i++) {
                                          showSlides(1, i);
                                        }
                                      
                                        // 4. The function called by your Prev/Next buttons
                                        function plusSlides(n, no) {
                                          showSlides(slideIndex[no] += n, no);
                                        }
                                      
                                        // 5. The core logic to hide/show images
                                        function showSlides(n, no) {
                                          let i;
                                          let x = document.getElementsByClassName(slideId[no]);
                                          
                                          // Safety check: if class doesn't exist, stop
                                          if (x.length === 0) return; 
                                      
                                          // Wrap around logic: go to first slide from last, or last from first
                                          if (n > x.length) { slideIndex[no] = 1; }    
                                          if (n < 1) { slideIndex[no] = x.length; }
                                          
                                          // Hide all images in this specific slideshow group
                                          for (i = 0; i < x.length; i++) {
                                            x[i].style.display = "none";  
                                          }
                                          
                                          // Show the current active image
                                          x[slideIndex[no]-1].style.display = "block";  
                                        }
                                      
                                        // Your existing Navigation Toggle function
                                        function myFunction() {
                                          var x = document.getElementById("myTopnav");
                                          if (x.className === "topnav") {
                                            x.className += " responsive";
                                          } else {
                                            x.className = "topnav";
                                          }
                                        }
                                      </script>
                                      
                                      Use code with caution.
                                      One Final Step (Double-Check your HTML Buttons) 
                                      For this script to work, the onclick on your arrows must match the Index numbers in the list above. Ensure your HTML buttons look exactly like this: 
                                      • 2024 Back2School (mySlides1): onclick="plusSlides(-1, 0)" and onclick="plusSlides(1, 0)"
                                      • 2024 Holiday Spa (mySlides2): onclick="plusSlides(-1, 1)" and onclick="plusSlides(1, 1)"
                                      • 2023 Cookies & Crafts (mySlides3): onclick="plusSlides(-1, 2)" and onclick="plusSlides(1, 2)"
                                      • 2023 Fostercare (mySlides4): onclick="plusSlides(-1, 3)" and onclick="plusSlides(1, 3)"
                                      • 2025 Military Spa (mySlides5): onclick="plusSlides(-1, 4)" and onclick="plusSlides(1, 4)"
                                      • Festivals & Events (mySlides6): onclick="plusSlides(-1, 5)" and onclick="plusSlides(1, 5)" 
                                      Note: You currently have flusSlides and flightSlides in parts of your HTML. Change all of those to plusSlides so they match the new script! 
                                      Creating a public link...
                                      Helpful
                                      Not helpful
                                      Thank you
                                      Your feedback helps Google improve. See our Privacy Policy.
                                      Share more feedbackReport a problemClose
                                          Show all
                                          its almost working can you tell me what im doing wrong

                                          February 03, 2026

                                          If it's almost working, you are likely hitting one of three common issues:
                                          index mismatches, typos in function names, or initialization errors. 
                                          1. Check for the "flusSlides" Typo 
                                          In the code you shared, you have several buttons using flusSlides and flightSlides. 
                                          • The Fix: You must change every single one of those to plusSlides in your HTML to match the new JavaScript function name. 
                                          2. Check the Index Numbers (The Second Number) 
                                          Each slideshow needs a unique ID number (0, 1, 2, 3, 4, 5) that tells the script which slideshow to move. If two slideshows use the same number, they will move together or stop working. 
                                          Double-check your HTML buttons match this exact order: 
                                          1. Back2School (mySlides1): Must be plusSlides(n, 0)
                                          2. Holiday Spa (mySlides2): Must be plusSlides(n, 1)
                                          3. Cookies & Crafts (mySlides3): Must be plusSlides(n, 2)
                                          4. Fostercare Spa (mySlides4): Must be plusSlides(n, 3)
                                          5. Military Spa (mySlides5): Must be plusSlides(n, 4)
                                          6. Festivals (mySlides6): Must be plusSlides(n, 5) 
                                          3. Check for Duplicate Global Variables 
                                          Make sure you have deleted any old lines that say var slideIndex = 1; at the top of your scripts. If you have that variable anywhere else, it can "clobber" the new array system. 
                                          4. Verify your CSS 
                                          If your images are still stacking or visible all at once when the page loads, make sure you added the display: none; rule to your CSS file for every class name: 
                                          css
                                          .mySlides1, .mySlides2, .mySlides3, .mySlides4, .mySlides5, .mySlides6 {
                                            display: none;
                                          }
                                          
                                          Use code with caution.
                                          Pro-Tip: Use the Console to Debug 
                                          If it still isn't working: 
                                          1. Open your page in Chrome.
                                          2. Press F12 (or Right-click > Inspect).
                                          3. Click the Console tab.
                                          4. If you see red text, it will tell you exactly which line has the error. If it says plusSlides is not defined, it means there is still a typo in your HTML button names. 
                                          These guides offer tips on debugging JavaScript errors using browser developer tools:
                                          Fix JavaScript errors reported in the Console - Microsoft Learn
                                          Fix JavaScript errors * Open the demo webpage JavaScript error reported in the Console tool in a new window or tab. * Right-click ...
                                          Microsoft Learn
                                          Debugging Javascript events with Developer Tools breakpoints
                                          Debugging Javascript Events Tutorial * Step 1. Open up the Developer Tools in Chrome (F12) when on the page you want to debug. ste...
                                          The freeCodeCamp Forum
                                          How to debug Javascript interactive issues - Documentation
                                          Preliminary Check for Javascript issues. In Chrome press F12 or Ctrl +shift+I and open the web developer console. You should see b...
                                          EventON Documentation
                                          How do I fix this html error for a slideshow? - Stack Overflow
                                          First, please replace your javascript code block just before body close tag in order to fix your Uncaught TypeError. And currently...
                                          Stack Overflow
                                          Multiple slideshows on one page makes the first one not work ...
                                          The only things left to do are to finish off the TODO list, which will help to make sure that everything works properly. * Rename ...
                                          SitePoint
                                          Slideshow code doesn't work in Javascript - Stack Overflow
                                          You define your index variable twice: slideIndex . Once as a global variable and then as a function parameter, overwriting only th...
                                          Stack Overflow
                                          Creating a public link...
                                          Helpful
                                          Not helpful
                                          Thank you
                                          Your feedback helps Google improve. See our Privacy Policy.
                                          Share more feedbackReport a problemClose
                                          • Multiple slideshows on one page makes the first one not work ...
                                            The only things left to do are to finish off the TODO list, which will help to make sure that everything works properly. * Rename ...
                                            SitePoint
                                          • Multiple slideshows not working (html, css, js) - Stack Overflow
                                            2 Answers. Sorted by: 1. Edit: Solution 1: the proper way would be to actually add 2 values to 'slideIndex': var slideIndex = [1, ...
                                            Stack Overflow
                                          • How do I fix this html error for a slideshow? - Stack Overflow
                                            First, please replace your javascript code block just before body close tag in order to fix your Uncaught TypeError. And currently...
                                            Stack Overflow
                                          • How to debug Javascript interactive issues - Documentation
                                            Preliminary Check for Javascript issues. In Chrome press F12 or Ctrl +shift+I and open the web developer console. You should see b...
                                            EventON Documentation
                                          • Slideshow code doesn't work in Javascript - Stack Overflow
                                            You define your index variable twice: slideIndex . Once as a global variable and then as a function parameter, overwriting only th...
                                            Stack Overflow
                                          • Debugging Javascript events with Developer Tools breakpoints
                                            Debugging Javascript Events Tutorial * Step 1. Open up the Developer Tools in Chrome (F12) when on the page you want to debug. ste...
                                            The freeCodeCamp Forum
                                          • Fix JavaScript errors reported in the Console - Microsoft Learn
                                            Fix JavaScript errors * Open the demo webpage JavaScript error reported in the Console tool in a new window or tab. * Right-click ...
                                            Microsoft Learn
                                          • Reuse (import) slides from another presentation - Microsoft Support
                                            In Normal view, in the navigation pane, click the slide that you want to insert the other slides after. On the Home tab, under Sli...
                                            Microsoft Support
                                          • Have a problem with two slideshows on the same page
                                            As a quick fix you could simply duplicate the script and some css and change the variables to mySlide2 etc and create another vers...
                                            SitePoint
                                          • Multiple slideshows on one page makes the first one not work ...
                                            The only things left to do are to finish off the TODO list, which will help to make sure that everything works properly. * Rename ...
                                            SitePoint
                                          • Multiple slideshows not working (html, css, js) - Stack Overflow
                                            2 Answers. Sorted by: 1. Edit: Solution 1: the proper way would be to actually add 2 values to 'slideIndex': var slideIndex = [1, ...
                                            Stack Overflow
                                          • How do I fix this html error for a slideshow? - Stack Overflow
                                            First, please replace your javascript code block just before body close tag in order to fix your Uncaught TypeError. And currently...
                                            Stack Overflow
                                          Show all
                                          im submitting the new code

                                          February 03, 2026

                                          When you implement the final code, pay close attention to the
                                          index numbers and function names in your buttons. Small typos like "flusSlides" instead of "plusSlides" will prevent the slider from working. 
                                          The Master Script (Copy & Paste) 
                                          Delete all your existing slideshow script blocks and replace them with this single, unified script. It is designed to handle all 6 of your slideshows correctly. 
                                          javascript
                                          <script>
                                          // 1. Array to track the current slide for each of your 6 slideshows
                                          // Each '1' corresponds to a slideshow (mySlides1 to mySlides6)
                                          let slideIndex =; 
                                          
                                          // 2. These are the exact class names used in your HTML
                                          let slideId = ["mySlides1", "mySlides2", "mySlides3", "mySlides4", "mySlides5", "mySlides6"]; 
                                          
                                          // 3. Start all 6 slideshows when the page loads
                                          for (let i = 0; i < slideId.length; i++) {
                                            showSlides(1, i);
                                          }
                                          
                                          // 4. THE ONLY function your buttons should call
                                          function plusSlides(n, no) {
                                            showSlides(slideIndex[no] += n, no);
                                          }
                                          
                                          function showSlides(n, no) {
                                            let i;
                                            let x = document.getElementsByClassName(slideId[no]);
                                            
                                            // If images aren't found for a class, stop to avoid errors
                                            if (x.length === 0) return; 
                                          
                                            // Reset to first slide if you go past the last, or last if you go before first
                                            if (n > x.length) {slideIndex[no] = 1}    
                                            if (n < 1) {slideIndex[no] = x.length}
                                            
                                            // Hide all images in ONLY this specific slideshow group
                                            for (i = 0; i < x.length; i++) {
                                               x[i].style.display = "none";  
                                            }
                                            
                                            // Show the active image
                                            x[slideIndex[no]-1].style.display = "block";  
                                          }
                                          
                                          // Keep your existing Navigation function
                                          function myFunction() {
                                            var x = document.getElementById("myTopnav");
                                            if (x.className === "topnav") {
                                              x.className += " responsive";
                                            } else {
                                              x.className = "topnav";
                                            }
                                          }
                                          </script>
                                          
                                          Use code with caution.
                                          Critical Checklist for Your HTML Buttons 
                                          For this script to function, every button must call plusSlides and use the correct Index ID based on the order in the slideId array: 
                                          Section Slideshow ClassCorrect Button Code
                                          Back2SchoolmySlides1plusSlides(n, 0)
                                          Holiday SpamySlides2plusSlides(n, 1)
                                          Cookies & CraftsmySlides3plusSlides(n, 2)
                                          FostercaremySlides4plusSlides(n, 3)
                                          Military SpamySlides5plusSlides(n, 4)
                                          FestivalsmySlides6plusSlides(n, 5)
                                          Troubleshooting common issues: 
                                          • Typos: Scan your HTML for "flusSlides" or "flightSlides" and change them all to plusSlides.
                                          • Duplicate Variables: Ensure you have deleted any global var slideIndex = 1; lines.
                                          • CSS: Add .mySlides1, .mySlides2, .mySlides3, .mySlides4, .mySlides5, .mySlides6 { display: none; } to your CSS to prevent images from stacking on load. 
                                          Creating a public link...
                                          Helpful
                                          Not helpful
                                          Thank you
                                          Your feedback helps Google improve. See our Privacy Policy.
                                          Share more feedbackReport a problemClose
                                          • Multiple slideshows on one page makes the first one not work ...
                                            Why aren't both slideshows showing? * Rename n to a more meaningful name. * slideIndex shouldn't be reassigned in the parameters o...
                                            SitePoint
                                          • Multiple slideshows on one page makes the first one not work ...
                                            Get slide buttons working with multiple slideshows * Rename n to a more meaningful name. * slideIndex shouldn't be reassigned in t...
                                            SitePoint
                                          • Multiple slideshows not working (html, css, js) - Stack Overflow
                                            2 Answers. Sorted by: 1. Edit: Solution 1: the proper way would be to actually add 2 values to 'slideIndex': var slideIndex = [1, ...
                                            Stack Overflow
                                          • More than one slideshows on one page - Stack Overflow
                                            Updated your code and 3 slideshows can run easily. You just have to adapt your js code (like I did); Add class name of the 3rd sli...
                                            Stack Overflow
                                          • How can I use multiple instances of a slider on the same page?
                                            That's a problem because you can't have multiple HTML elements in the same page with the same ID - it's just not allowed, and will...
                                            Reddit
                                          • How do I make multiple slideshows on same page in HTML?
                                            First thing is that you have your divs with the Class of slideshow but when you are calling them in styles you are calling the id.
                                            Stack Overflow
                                          • Preventing multiple JS carousels from conflicting with each other on ...
                                            The variable slideIndex could be inside your carousel function and would've avoided this issue. Like Rob mentioned, it's worth rea...
                                            Web Designer Forum
                                          • How to enable multiple javascript slideshows on one page?
                                            How to enable multiple javascript slideshows on one page? ... var slideIndex = 1; var indexes = document. querySelectorAll(". numb...
                                            Stack Overflow
                                          • How to Create a Slideshow with JavaScript? - WebNots
                                            Customizing Options for Slideshow You can customize the appearance of the JavaScript slideshow using the below options. Replace th...
                                            WebNots
                                          • Arrays and Slideshows - Computer Science - Wellesley College
                                            getElementById("slideshow"). src = url; } We really should do something about the ALT and the FIGCAPTION, but we'll leave that as ...
                                            Wellesley
                                          • Multiple slideshows on one page makes the first one not work ...
                                            Get slide buttons working with multiple slideshows * Rename n to a more meaningful name. * slideIndex shouldn't be reassigned in t...
                                            SitePoint
                                          • Multiple slideshows not working (html, css, js) - Stack Overflow
                                            2 Answers. Sorted by: 1. Edit: Solution 1: the proper way would be to actually add 2 values to 'slideIndex': var slideIndex = [1, ...
                                            Stack Overflow
                                          • More than one slideshows on one page - Stack Overflow
                                            Updated your code and 3 slideshows can run easily. You just have to adapt your js code (like I did); Add class name of the 3rd sli...
                                            Stack Overflow
                                          Show all
                                          <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Past-Events Page</title> <link rel="stylesheet" href="/styles.css"> <link rel="stylesheet" href="/default.css"></head><body> <nav class="navbar"> <ul class="nav-list page-container"> <li><a href="/index.html"><h3>Home</h3></a></li> <li> <a href="#"><h3>Events</h3></a> <ul class="nav-list dropdown"> <li><a href="/past-events.html"><h3>Past Events</h3></a></li> <li class="dropdown-radius"><a href="Upcoming-Events.html"><h3>Upcoming Events</h3></a></li> </ul> </li> <li> <a href="#"><h3>Support</h3></a> <ul class="nav-list dropdown"> <li><a href="/support.html"><h3>Volunteer</h3></a></li> <li><a href="/donate.html"><h3>Donate</h3></a></li> <li class="dropdown-radius"><a href="/contact.html"><h3>Contact</h3></a></li> <li class="dropdown-radius"><a href="/sponsorships.html"><h3>Sponsorship</h3></a></li> </ul> </li> </ul> </nav> <div class="topnav" id="myTopnav"> <a href="/index.html" class="active"><h3>Home</h3></a> <div class="dropdown"> <button class="dropbtn">Events <i class="fa fa-caret-down"></i> </button> <div class="dropdown-content"> <a href="/events.html">Events</a> <a href="/past-events.html">Past Events</a> <a href="/Upcoming-Events.html">Upcoming Events</a> </div> </div> <div class="dropdown"> <button class="dropbtn">Support <i class="fa fa-caret-down"></i> </button> <div class="dropdown-content"> <a href="/support.html">Volunteer</a> <a href="/donate.html">Donate</a> <a href="/contact.html">Contact</a> <a href="/sponsorships.html">Sponsorship</a> </div> </div> <a href="javascript:void(0);" class="icon" onclick="myFunction()">☰</a> </div> <header> <h1 style="text-align: center;" class="past-htwo">Past Events</h1> </header> <h2 class="past-htwo">2025 Back2School Youth Day Spa</h2> <div class="sponsor-layout mobile-page-container page-container"> <div class="past-image-vertical"> <img class="b2s-img-layout" src="/images/Flyers/Back 2 School Flyer.png"> </div> <div class="sponsor-names"> <h2>Sponsors</h2> <p>Ambiance Beauty Bar</p> <p>BNI Roundtable Chapter</p> <p>T&T Tax services</p> <p>Toni Hokanson-Farmer insurance</p> <p>Saar’s super saver foods- </p> <p>Evergreen Beauty College </p> <p>Evergreen drill and drum line</p> <p>Dynasty Designz</p> <p>Villagers</p> </div> </div> <h2 class="past-htwo">2025 Military Youth Day Spa</h2> <div class="sponsor-layout mobile-page-container page-container"> <div class="past-image-vertical"> <div class="mySlides5"> <div class="numbertext"></div> <img src="/images/2025 Military Youth Day Spa/salute to the youth.jpeg" alt="mil-flyer"> </div> <div class="mySlides5"> <div class="numbertext"></div> <img src="/images/2025 Military Youth Day Spa/2025-03-23 12.48.23.jpg" alt="mil-one"> </div> <div class="mySlides5"> <div class="numbertext"></div> <img src="/images/2025 Military Youth Day Spa/2025-03-23 12.48.46.jpg" alt="mil-two"> </div> <div class="mySlides5"> <div class="numbertext"></div> <img src="/images/2025 Military Youth Day Spa/2025-03-23 12.49.09.jpg" alt="mil-three"> </div> <div class="mySlides5"> <div class="numbertext"></div> <img src="/images/2025 Military Youth Day Spa/2025-03-23 12.49.11.jpg" alt="mil-four"> </div> <div class="mySlides5"> <div class="numbertext"></div> <img src="/images/2025 Military Youth Day Spa/2025-03-23 12.49.23.jpg" alt="mil-five"> </div> <div class="mySlides5"> <div class="numbertext"></div> <img src="/images/2025 Military Youth Day Spa/2025-03-23 12.49.59.jpg" alt="mil-six"> </div> <div class="mySlides5"> <div class="numbertext"></div> <img src="/images/2025 Military Youth Day Spa/2025-03-23 12.50.01.jpg" alt="mil-seven"> </div> <div class="mySlides5"> <div class="numbertext"></div> <img src="/images/2025 Military Youth Day Spa/2025-03-23 12.50.25.jpg" alt="mil-eight"> </div> <div class="mySlides5"> <div class="numbertext"></div> <img src="/images/2025 Military Youth Day Spa/2025-03-23 12.50.34.jpg" alt="mil-nine"> </div> <div class="mySlides5"> <div class="numbertext"></div> <img src="/images/2025 Military Youth Day Spa/2025-03-23 12.51.16.jpg" alt="mil-ten"> </div> <div class="mySlides5"> <div class="numbertext"></div> <img src="/images/2025 Military Youth Day Spa/2025-03-23 12.51.34.jpg" alt="mil-eleven"> </div> <div class="mySlides5"> <div class="numbertext"></div> <img src="/images/2025 Military Youth Day Spa/arts & crafts MDYSD.JPG" alt="mil-twelve"> </div> <div class="mySlides5"> <div class="numbertext"></div> <img src="/images/2025 Military Youth Day Spa/IMG_1704.JPG" alt="mil-thirteen"> </div> <div class="mySlides5"> <div class="numbertext"></div> <img src="/images/2025 Military Youth Day Spa/IMG_1705.JPG" alt="mil-fourteen"> </div> <div class="mySlides5"> <div class="numbertext"></div> <img src="/images/2025 Military Youth Day Spa/IMG_1707.JPG" alt="mil-fifteen"> </div> <div class="mySlides5"> <div class="numbertext"></div> <img src="/images/2025 Military Youth Day Spa/IMG_1708.JPG" alt="mil-sixteen"> </div> <div class="mySlides5"> <div class="numbertext"></div> <img src="/images/2025 Military Youth Day Spa/NWTQ8742.JPEG" alt="mil-seventeen"> </div> <a class="prev" onclick="plusSlides(-1, 4)">❮</a> <a class="next" onclick="plusSlides(1, 4)">❯</a> <br> </div> <div class="sponsor-names"> <h2>Sponsors</h2> <p>Charlie’s Angel’s Unisex Salon</p> <p>Behind the Chair Foundation</p> <p>The Lions Den-Roop and Bryanna </p> <p>Rockstar Crown Royalty</p> <p>Overtones Salon</p> <p>Monticello Methodist Church</p> <p>Sandy Warren</p> <p>Snack Shack</p> <p>Adams </p> <p>Price Chopper</p> <p>Hannafords</p> <p>Sound of life</p> <p>Villagers</p> </div></div> <h2 class="past-htwo">2024 Holiday Day Spa with Behind the Chair Foundation <br> Youth of Incarcerated Parent</h2> <div class="sponsor-layout mobile-page-container page-container"> <div class="past-image-vertical"> <div class="mySlides2"> <div class="numbertext">Flyer</div> <img src="/images/Holiday kids day spa flyer.JPG" alt="hol-ten" style="width: 100%;"> </div> <div class="mySlides2"> <div class="numbertext">1/11</div> <img src="/images/Holiday kids day spa/IMG_8281.JPG" alt="hol-ten" style="width: 100%;"> </div> <div class="mySlides2"> <div class="numbertext">2/11</div> <img src="/images/Holiday kids day spa/IMG_8283.JPG" alt="hol-eleven"> </div> <div class="mySlides2"> <div class="numbertext">3/11</div> <img src="/images/Holiday kids day spa/IMG_8284.JPG" alt="hol-twelve"> </div> <div class="mySlides2"> <div class="numbertext">4/11</div> <img src="/images/Holiday kids day spa/IMG_8286.JPG" alt="hol-thirteen"> </div> <div class="mySlides2"> <div class="numbertext">5/11</div> <img src="/images/Holiday kids day spa/IMG_8287.JPG" alt="hol-fourteen"> </div> <div class="mySlides2"> <div class="numbertext">6/11</div> <img src="/images/Holiday kids day spa/IMG_8288.JPG" alt="

                                          February 03, 2026

                                          It looks like you are on the right track! Based on the HTML you just provided, I can see you have correctly updated the buttons for the
                                          Military Spa to plusSlides(n, 4). 
                                          The main reason it might not be "fully" working yet is that the browser needs the JavaScript code and the CSS to know what those button clicks mean and to hide the extra images. 
                                          Here is the exact code to finish your page. 
                                          1. The Master JavaScript 
                                          Paste this at the very bottom of your HTML file, right before the </body> tag. I have organized the slideId array to match the index numbers you are using in your buttons. 
                                          javascript
                                          <script>
                                            // Tracks the current slide for each slideshow
                                            // Index:          0, 1, 2, 3, 4, 5
                                            let slideIndex =; 
                                          
                                            // This list MUST match your HTML class names
                                            let slideId = [
                                              "mySlides1", // 0: Back2School 2024
                                              "mySlides2", // 1: Holiday Spa 2024
                                              "mySlides3", // 2: Cookies & Crafts 2023
                                              "mySlides4", // 3: Fostercare 2023
                                              "mySlides5", // 4: Military Spa 2025
                                              "mySlides6"  // 5: Festivals
                                            ]; 
                                          
                                            // Initialize all slideshows
                                            for (let i = 0; i < slideId.length; i++) {
                                              showSlides(1, i);
                                            }
                                          
                                            function plusSlides(n, no) {
                                              showSlides(slideIndex[no] += n, no);
                                            }
                                          
                                            function showSlides(n, no) {
                                              let i;
                                              let x = document.getElementsByClassName(slideId[no]);
                                              if (x.length === 0) return; 
                                          
                                              if (n > x.length) { slideIndex[no] = 1; }    
                                              if (n < 1) { slideIndex[no] = x.length; }
                                              
                                              for (i = 0; i < x.length; i++) {
                                                x[i].style.display = "none";  
                                              }
                                              
                                              x[slideIndex[no]-1].style.display = "block";  
                                            }
                                          
                                            // Your Navigation Function
                                            function myFunction() {
                                              var x = document.getElementById("myTopnav");
                                              if (x.className === "topnav") {
                                                x.className += " responsive";
                                              } else {
                                                x.className = "topnav";
                                              }
                                            }
                                          </script>
                                          
                                          Use code with caution.
                                          2. The CSS (Crucial) 
                                          If you don't add this to your <style> section or your styles.css file, all the images will stay visible at the same time. This hides them until the JavaScript picks one to show. 
                                          css
                                          /* Hide all slides by default */
                                          .mySlides1, .mySlides2, .mySlides3, .mySlides4, .mySlides5, .mySlides6 {
                                            display: none;
                                          }
                                          
                                          /* Optional: Make images fit their container */
                                          .past-image-vertical img {
                                            width: 100%;
                                            height: auto;
                                            display: block;
                                          }
                                          
                                          Use code with caution.
                                          3. Quick Button Audit 
                                          Double-check your HTML file for these two things: 
                                          1. Holiday Spa (mySlides2): Ensure the buttons at the end of that section say plusSlides(n, 1).
                                          2. Back2School (mySlides1): Ensure those buttons say plusSlides(n, 0). 
                                          What was likely "wrong":
                                          In your previous snippets, you had different function names like flusSlides and flightSlides. By using this one master plusSlides function and the array above, all your slideshows will now act independently! 
                                          Would you like me to double-check any other specific section of the code for you? 
                                          Creating a public link...
                                          Helpful
                                          Not helpful
                                          Thank you
                                          Your feedback helps Google improve. See our Privacy Policy.
                                          Share more feedbackReport a problemClose
                                              Show all
                                              </div> <div class="mySlides2"> <div class="numbertext">7/11</div> <img src="/images/Holiday kids day spa/IMG_8289.JPG" alt="hol-sixteen"> </div> <div class="mySlides2"> <div class="numbertext">8/11</div> <img src="/images/Holiday kids day spa/IMG_8290.JPG" alt="hol-seventeen"> </div> <div class="mySlides2"> <div class="numbertext">9/11</div> <img src="/images/Holiday kids day spa/IMG_8292.JPG" alt="hol-eighteen"> </div> <div class="mySlides2"> <div class="numbertext">10/11</div> <img src="/images/Holiday kids day spa/IMG_8285.JPG" alt="hol-nineteen"> </div> <div class="mySlides2"> <div class="numbertext">11/11</div> <img src="/images/Holiday kids day spa/IMG_8298.JPG" alt="hol-twenty"> </div> <a class="prev" onclick="plusSlides(-1, 1)">❮</a> <a class="next" onclick="plusSlides(1, 1)">❯</a> </div> <div class="sponsor-names"> <h2>Sponsors</h2> <p>Host- Split Enz Hair Studio</p> <p>CSEA/VOICE Local 100A</p> <p>HOT-N-TOTS Children Center</p> <p>Cosmoprof</p> <p>C & C Unisex Poughkeepsie</p> <p>Monticello Methodist Church</p> <p>Adams</p> <p>Hannafords</p> <p>Price Chopper</p> <p>CosmoProf</p> <p>Villagers</p> </div> </div> <h2 class="past-htwo">2024 Back2School Youth Day Spa</h2> <div class="past-events mobile-page-container page-container"> <section class="past-section"> <div class="sponsor-layout mobile-page-container page-container"> <div class="past-image-vertical past-image-vertical-one"> <div class="mySlides1"> <div class="numbertext">Flyer</div> <img src="/images/Flyers/6454312585190235839.jpg" alt="hol-ten" style="width: 100%;"> </div> <div class="mySlides1"> <div class="numbertext">1/16</div> <img src="/images/Backpacks.svg" alt="img-one" style="width: 100%;"> </div> <div class="mySlides1"> <div class="numbertext">1/16</div> <img src="/images/Past Events Two women.svg" alt="img-one" style="width: 100%;"> </div> <div class="mySlides1"> <div class="numbertext">1/16</div> <img src="/images/Past Events one woman.svg" alt="img-one" style="width: 100%;"> </div> <div class="mySlides1"> <div class="numbertext">1/16</div> <img src="/images/B2S Photos/IMG_2143.jpg" alt="img-one" style="width: 100%;"> </div> <div class="mySlides1"> <div class="numbertext">2/16</div> <img src="/images/B2S Photos/IMG_2174.jpg" alt="img-four" style="width: 100%;"> </div> <div class="mySlides1"> <div class="numbertext">3/16</div> <img src="/images/B2S Photos/IMG_4724.jpg" alt="img-five" style="width: 100%;"> </div> <div class="mySlides1"> <div class="numbertext">4/16</div> <img src="/images/B2S Photos/IMG_4729.jpg" alt="img-seven" style="width: 100%;"> </div> <div class="mySlides1"> <div class="numbertext">5/16</div> <img src="/images/B2S Photos/IMG_4731.jpg" alt="img-eight" style="width: 100%;"> </div> <div class="mySlides1"> <div class="numbertext">6/16</div> <img src="/images/B2S Photos/IMG_4732.jpg" alt="img-nine" style="width: 100%;"> </div> <div class="mySlides1"> <div class="numbertext">7/16</div> <img src="/images/B2S Photos/IMG_4734.jpg" alt="img-ten" style="width: 100%;"> </div> <div class="mySlides1"> <div class="numbertext">8/16</div> <img src="/images/B2S Photos/IMG_7691.jpg" alt="img-eleven" style="width: 100%;"> </div> <div class="mySlides1"> <div class="numbertext">9/16</div> <img src="/images/B2S Photos/IMG_7692.JPG" alt="img-twelve" style="width: 100%;"> </div> <div class="mySlides1"> <div class="numbertext">10/16</div> <img src="/images/B2S Photos/IMG_7693.jpg" alt="img-thirteen" style="width: 100%;"> </div> <div class="mySlides1"> <div class="numbertext">11/16</div> <img src="/images/B2S Photos/IMG_7694.jpg" alt="img-fourteen" style="width: 100%;"> </div> <div class="mySlides1"> <div class="numbertext">12/16</div> <img src="/images/B2S Photos/IMG_7702.JPG" alt="img-sixteen" style="width: 100%;"> </div> <div class="mySlides1"> <div class="numbertext">13/16</div> <img src="/images/B2S Photos/IMG_7708.jpg" alt="img-seventeen" style="width: 100%;"> </div> <div class="mySlides1"> <div class="numbertext">14/16</div> <img src="/images/B2S Photos/IMG_7710.jpg" alt="img-eighteen" style="width: 100%;"> </div> <div class="mySlides1"> <div class="numbertext">15/16</div> <img src="/images/B2S Photos/IMG_7712.jpg" alt="img-nineteen" style="width: 100%;"> </div> <div class="mySlides1"> <div class="numbertext">16/16</div> <img src="/images/B2S Photos/IMG_7713.JPG" alt="img-twenty" style="width: 100%;"> </div> <div class="mySlides1"> <div class="numbertext">1/4</div> <img src="/images/B2S Photos/IMG_2154.jpg" alt="img-two"> </div> <div class="mySlides1"> <div class="numbertext">2/4</div> <img src="/images/B2S Photos/IMG_2155.jpg" alt="img-three"> </div> <div class="mySlides1"> <div class="numbertext">3/4</div> <img src="/images/B2S Photos/IMG_4727.jpg" alt="img-six"> </div> <div class="mySlides1"> <div class="numbertext">4/4</div> <img src="/images/B2S Photos/IMG_7695.jpg" alt="img-fifteen"> </div> <a class="prev" onclick="plusSlides(-1, 0)">❮</a> <a class="next" onclick="plusSlides(1, 0)">❯</a> </div> </div> <div class="video"> <iframe width="500px" height="600" src="https://www.youtube.com/embed/KCT2M4_2hhU" title="Back to school kids day spa" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe> </div> <div class="sponsor-names sponsornames"> <h2>Sponsors</h2> <p>Host- Maria’s Hair Salon</p> <p>Alloy Studio</p> <p>One Strike</p> <p>HOT-N-TOTS Children Center</p> <p>Monticello Methodist Church</p> <p>Villagers</p> <p>Adams</p> <p>Sam’s Club</p> <p>Seasoned Gives</p> </div> </section> </div> <h2 class="past-htwo">2023 Christmas Cookies and Crafts</h2> <div class="sponsor-layout mobile-page-container page-container"> <div class="past-events-layout past-events-layout-two"> <div class="past-image-vertical"> <div class="mySlides3"> <div class="numbertext">Flyer</div> <img src="/images/Holiday kids day spa/76E054A7-9CED-4152-8AED-776E74C15AA4.PNG" alt="cook-flyer"> </div> <div class="mySlides3"> <div class="numbertext">1/8</div> <img src="/images/Holiday kids day spa/IMG_6908.jpg" alt="cook-one"> </div> <div class="mySlides3"> <div class="numbertext">2/8</div> <img src="/images/Holiday kids day spa/IMG_6909.jpg"

                                              February 03, 2026

                                              Based on the complete HTML you’ve provided, here is the final, corrected version of your code.
                                               
                                              I have fixed the function names (changing flusSlides and flightSlides to plusSlides), assigned the correct index numbers to your buttons, and consolidated your JavaScript into one clean block. 
                                              1. The Corrected JavaScript 
                                              Delete all the small <script> blocks you currently have at the bottom of your file and replace them with this single "Master Script." This one script handles all 6 of your slideshows perfectly. 
                                              javascript
                                              <script>
                                                // 1. Array to track the current slide for each of your 6 slideshows
                                                // Index:          0, 1, 2, 3, 4, 5
                                                let slideIndex = [1, 1, 1, 1, 1, 1]; 
                                              
                                                // 2. These match the class names in your HTML
                                                let slideId = [
                                                  "mySlides1", // Index 0 (2024 Back2School)
                                                  "mySlides2", // Index 1 (2024 Holiday Spa)
                                                  "mySlides3", // Index 2 (2023 Cookies & Crafts)
                                                  "mySlides4", // Index 3 (2023 1st Kids Day Spa)
                                                  "mySlides5", // Index 4 (2025 Military Spa)
                                                  "mySlides6"  // Index 5 (Festivals Participation)
                                                ]; 
                                              
                                                // 3. Initialize all slideshows on page load
                                                for (let i = 0; i < slideId.length; i++) {
                                                  showSlides(1, i);
                                                }
                                              
                                                // 4. THE ONLY function your buttons should call
                                                function plusSlides(n, no) {
                                                  showSlides(slideIndex[no] += n, no);
                                                }
                                              
                                                function showSlides(n, no) {
                                                  let i;
                                                  let x = document.getElementsByClassName(slideId[no]);
                                                  
                                                  // Safety check: if class doesn't exist, stop
                                                  if (!x || x.length === 0) return; 
                                              
                                                  // Wrap around logic
                                                  if (n > x.length) { slideIndex[no] = 1; }    
                                                  if (n < 1) { slideIndex[no] = x.length; }
                                                  
                                                  // Hide all images in this specific group
                                                  for (i = 0; i < x.length; i++) {
                                                    x[i].style.display = "none";  
                                                  }
                                                  
                                                  // Show the active image
                                                  x[slideIndex[no]-1].style.display = "block";  
                                                }
                                              
                                                // Your Navigation function
                                                function myFunction() {
                                                  var x = document.getElementById("myTopnav");
                                                  if (x.className === "topnav") {
                                                    x.className += " responsive";
                                                  } else {
                                                    x.className = "topnav";
                                                  }
                                                }
                                              </script>
                                              
                                              Use code with caution.
                                              2. Verify Your HTML Buttons 
                                              Make sure the buttons in your HTML use the exact numbers below. I noticed some were set to 0 or 1 that should have been higher. 
                                              • 2024 Back2School (mySlides1): plusSlides(n, 0)
                                              • 2024 Holiday Spa (mySlides2): plusSlides(n, 1)
                                              • 2023 Cookies & Crafts (mySlides3): plusSlides(n, 2)
                                              • 2023 1st Kids Day Spa (mySlides4): plusSlides(n, 3)
                                              • 2025 Military Spa (mySlides5): plusSlides(n, 4)
                                              • Festivals & Events (mySlides6): plusSlides(n, 5) 
                                              3. Add This to Your CSS 
                                              If you don't do this, all your images will appear in a giant list when the page first loads. Add this to your styles.css file: 
                                              css
                                              .mySlides1, .mySlides2, .mySlides3, .mySlides4, .mySlides5, .mySlides6 {
                                                display: none;
                                              }
                                              
                                              Use code with caution.
                                              What was wrong? 
                                              1. Typos: Your code had flusSlides, flightSlides, and khowSlides. These all needed to be renamed to one single function: plusSlides.
                                              2. Index Mismatch: Some of your buttons were using 0 when they should have used 2 or 4. The index tells the script which array of images to look at.
                                              3. Multiple Scripts: You had three separate script blocks trying to do the same thing, which often causes browsers to get "confused" or overwrite variables. Using one "Master Script" solves this. 
                                              Creating a public link...
                                              Helpful
                                              Not helpful
                                              Thank you
                                              Your feedback helps Google improve. See our Privacy Policy.
                                              Share more feedbackReport a problemClose
                                                  Show all
                                                  </div> <div class="mySlides3"> <div class="numbertext">3/8</div> <img src="/images/Holiday kids day spa/IMG_6910.jpg" alt="cook-three"> </div> <div class="mySlides3"> <div class="numbertext">4/8</div> <img src="/images/Holiday kids day spa/IMG_6911.jpg" alt="cook-four"> </div> <div class="mySlides3"> <div class="numbertext">5/8</div> <img src="/images/Holiday kids day spa/IMG_6912.jpg" alt="cook-five"> </div> <div class="mySlides3"> <div class="numbertext">6/8</div> <img src="/images/Holiday kids day spa/IMG_6913.jpg" alt="cook-six"> </div> <div class="mySlides3"> <div class="numbertext">7/8</div> <img src="/images/Holiday kids day spa/IMG_6914.jpg" alt="cook-seven"> </div> <div class="mySlides3"> <div class="numbertext">8/8</div> <img src="/images/Holiday kids day spa/IMG_6915.jpg" alt="cook-eight"> </div> <a class="prev" onclick="plusSlides(-1, 2)">❮</a> <a class="next" onclick="plusSlides(1, 2)">❯</a> </div> <br> </div> <div class="sponsor-names"> <h2>Sponsors</h2> <p>Host- Seasoned Gives</p> <p>Monticello Methodist Church</p> <p>Adams</p> <p>Price Chopper</p> <p>Hannafords</p> <p>Villagers</p> </div> </div> <h2 class="past-htwo">2023 1st Kids Day Spa <br> For Fostercare/Group Homes</h2> <div class="sponsor-layout mobile-page-container page-container"> <div class="past-image-vertical b2s-layout"> <div class="mySlides4"> <img src="/images/Flyers/2023 Flyer.jpg" alt="flyer"> </div> <div class="mySlides4"> <div class="numbertext">1/5</div> <img src="/images/first kids day spa/image000000.jpg" alt="first-two"> </div> <div class="mySlides4"> <div class="numbertext">2/5</div> <img src="/images/first kids day spa/image000003.jpg" alt="first-three"> </div> <div class="mySlides4"> <div class="numbertext">3/5</div> <img src="/images/first kids day spa/IMG_4064.jpg" alt="first-five"> </div> <div class="mySlides4"> <div class="numbertext">4/5</div> <img src="/images/first kids day spa/IMG_4067.jpg" alt="first-six"> </div> <div class="mySlides4"> <div class="numbertext">5/5</div> <img src="/images/first kids day spa/IMG_4058.jpg" alt="first-four"> </div> <a class="prev" onclick="plusSlides(-1, 3)">❮</a> <a class="next" onclick="plusSlides(1, 3)">❯</a> </div> <div class="sponsor-names"> <h2>Sponsors</h2> <p>Host- Seasoned Gives</p> <p>HOHA Academy</p> <p>C & C Unisex Kingston</p> <p>Advanced Skin Medspa</p> <p>Satz Hair</p> <p>One Strike</p> <p>Monticello Methodist Church</p> <p>Adams </p> <p>Price Chopper</p> <p>Villagers</p> </div> </div> <h2 class="past-htwo">Festival and Events Participation</h2> <div class="past-event-layout"><div class="sponsor-layout"> <div class="past-image-vertical"> <div class="mySlides6"> <div class="numbertext">1/12</div> <img src="/images/Festivals and Event Participation/AAMZ6643.JPG" alt="fest-one"> </div> <div class="mySlides6"> <div class="numbertext">2/12</div> <img src="/images/Festivals and Event Participation/ALUI3879.JPG" alt="fest-two"> </div> <div class="mySlides6"> <div class="numbertext">3/12</div> <img src="/images/Festivals and Event Participation/BCPN6717.JPG" alt="fest-three"> </div> <div class="mySlides6"> <div class="numbertext">4/12</div> <img src="/images/Festivals and Event Participation/BVRR4615.JPG" alt="fest-four"> </div> <div class="mySlides6"> <div class="numbertext">5/12</div> <img src="/images/Festivals and Event Participation/CGTH0338.JPG" alt="fest-five"> </div> <div class="mySlides6"> <div class="numbertext">6/12</div> <img src="/images/Festivals and Event Participation/CMAF6080.JPG" alt="fest-six"> </div> <div class="mySlides6"> <div class="numbertext">7/12</div> <img src="/images/Festivals and Event Participation/CZAH5233.JPG" alt="fest-seven"> </div> <div class="mySlides6"> <div class="numbertext">8/12</div> <img src="/images/Festivals and Event Participation/EYDM8674.JPG" alt="fest-eight"> </div> <div class="mySlides6"> <div class="numbertext">9/12</div> <img src="/images/Festivals and Event Participation/FQYS7532.JPG" alt="fest-nine"> </div> <div class="mySlides6"> <div class="numbertext">10/12</div> <img src="/images/Festivals and Event Participation/GMNG2964.JPG" alt="fest-ten"> </div> <div class="mySlides6"> <div class="numbertext">11/12</div> <img src="/images/Festivals and Event Participation/IMG_7940.WEBP" alt="fest-eleven"> </div> <div class="mySlides6"> <div class="numbertext">12/12</div> <img src="/images/Festivals and Event Participation/BFJM3934.JPG" alt="fest-twelve"> </div> <a class="prev" onclick="plusSlides(-1, 5)">❮</a> <a class="next" onclick="plusSlides(1, 5)">❯</a> <br> </div> <div class="sponsor-names"> <p>Fallsburg National Night Out</p> <p>Touch-a-Truck New Paltz</p> <p>Seasoned Gives Caribbean Carnival </p> <p>MyKington Kids Kite and Halloween Festival</p> </div> </div> </div> <footer> <div class="footer-container"> <div class="facebook-footer"> <a href="https://www.facebook.com/p/Brandens-Safe-House-100077497014724/"><i class="fa-brands fa-facebook"></i></a> </div> <div class="copyright-footer"><h5>&copy;Copyright 2025 BrandensSafeHouse.org</h5></div> </div> </footer> <script src="https://kit.fontawesome.com/3f6e3b3cfe.js" crossorigin="anonymous"></script><script> // 1. Tracks the current slide for each of your 6 slideshows // Index: 0, 1, 2, 3, 4, 5 let slideIndex = [1, 1, 1, 1, 1, 1]; // 2. These are the exact class names used in your HTML let slideId = [ "mySlides1", // Index 0 (Back2School) "mySlides2", // Index 1 (Holiday Spa) "mySlides3", // Index 2 (Cookies & Crafts) "mySlides4", // Index 3 (Fostercare) "mySlides5", // Index 4 (Military Spa) "mySlides6" // Index 5 (Festivals) ]; // 3. Initialize all 6 slideshows when the page loads for (let i = 0; i < slideId.length; i++) { showSlides(1, i); } // 4. The function called by your Prev/Next buttons function plusSlides(n, no) { showSlides(slideIndex[no] += n, no); } // 5. The core logic to hide/show images function showSlides(n, no) { let i; let x = document.getElementsByClassName(slideId[no]); // Safety check: if class doesn't exist, stop if (x.length === 0) return; // Wrap around logic: go to first slide from last, or last from first if (n > x.length) { slideIndex[no] = 1; } if (n < 1) { slideIndex[no] = x.length; } // Hide all images in this specific slideshow group for (i = 0; i < x.length; i++) { x[i].style.display = "none"; } // Show the current active image x[slideIndex[no]-1].style.display = "block"; } // Your existing Navigation Toggle function function myFunction() { var x = document.getElementById("myTopnav"); if (x.className === "topnav") { x.className += " responsive"; } else { x.className = "topnav"; } }</script> </body>

                                                  February 03, 2026

                                                  It looks like you have correctly updated your HTML buttons to match the index numbers in the JavaScript!
                                                   
                                                  The code you just submitted is very clean, but there is one last thing you need to do to make it actually work on the screen. Currently, every single image for all 6 slideshows is trying to show at the same time, which creates a long, messy list. 
                                                  1. Add this CSS to your styles.css 
                                                  Open your CSS file (or add a <style> tag in your <head>) and paste this. This is the "magic" that hides the extra images so only one shows at a time. 
                                                  css
                                                  /* This hides all images in every slideshow by default */
                                                  .mySlides1, .mySlides2, .mySlides3, .mySlides4, .mySlides5, .mySlides6 {
                                                    display: none;
                                                  }
                                                  
                                                  /* Optional: This makes sure your images look nice and centered */
                                                  .past-image-vertical img {
                                                    width: 100%;
                                                    height: auto;
                                                    border-radius: 8px; /* Optional: gives images rounded corners */
                                                  }
                                                  
                                                  Use code with caution.
                                                  2. Why this is the final fix: 
                                                  • The JavaScript: You correctly set slideId as an array and slideIndex as [1, 1, 1, 1, 1, 1]. This allows each section to move independently.
                                                  • The HTML: Your buttons now use plusSlides(1, 0), plusSlides(1, 1), etc., which perfectly matches the order in your script.
                                                  • The CSS: Without the display: none; in your CSS, the JavaScript can't "hide" the images properly when the page first loads. 
                                                  3. Quick Check 
                                                  Once you add that CSS, refresh your page. 
                                                  • Clicking the arrows on 2023 Cookies & Crafts should move only those 8 images because it uses index 2.
                                                  • Clicking the arrows on Festivals should move only those 12 images because it uses index 5. 
                                                  You are all set! Your implementation is now correct. 
                                                  Creating a public link...
                                                  Helpful
                                                  Not helpful
                                                  Thank you
                                                  Your feedback helps Google improve. See our Privacy Policy.
                                                  Share more feedbackReport a problemClose
                                                      Show all
                                                      Tab
                                                      Dismiss
                                                      More input options
                                                      Microphone
                                                      Send
                                                      Ask about

                                                      Turn on your Visual Search History?

                                                      Google uses its visual recognition technologies to process the images you use to search, like when you search with Google Lens. If you turn on your Visual Search History, Google will save these images from eligible Google services to your Web & App Activity when you’re signed in to your Google Account. You can learn more about this setting and which Google services save images to it at g.co/Search/VisualSearchHistory.

                                                      How visual search history is used

                                                      Your Visual Search History may be used to improve your experience on Google services, like letting you revisit your past visual searches. It may be used to develop and improve Google’s visual recognition and search technologies, as well as the Google services that use them.

                                                      When visual search history is off

                                                      If you turn this setting off, any previous Visual Search History may still be kept and used to improve Google’s visual recognition and search technologies, unless you delete it from your Web & App Activity.

                                                      Visual Search History doesn’t affect images saved by other settings, like Gemini Apps Activity.

                                                      How to manage your Visual Search History

                                                      You can view, delete, or manage your Visual Search History at activity.google.com. To download your Visual Search History, visit takeout.google.com. Images will be deleted in accordance with your Web & App Activity auto-delete settings, although some types of images may be deleted sooner.

                                                      Google uses and saves data in accordance with Google Privacy Policy.

                                                      No thanks
                                                      Turn on
                                                      My Ad Center

                                                      Search Results

                                                      Search Labs
                                                      Google apps
                                                      Google Account
                                                      Antonio Dickey
                                                      bigton7307@gmail.com